Bootstrap: how to truly center an image in a column?2019 Community Moderator ElectionHow to horizontally center a <div>?How to make div not larger than its contents?Vertically align text next to an image?How do I give text or an image a transparent background using CSS?How to disable text selection highlighting?How to check whether a checkbox is checked in jQuery?How to make a div 100% height of the browser window?How to disable resizable property of textarea?How do I vertically center text with CSS?Center a column using Twitter Bootstrap 3
What is better: yes / no radio, or simple checkbox?
Should I use HTTPS on a domain that will only be used for redirection?
How to kill a localhost:8080
Why is it "take a leak?"
Is there a full canon version of Tyrion's jackass/honeycomb joke?
Should we avoid writing fiction about historical events without extensive research?
Being asked to review a paper in conference one has submitted to
How can I highlight parts in a screenshot
When was drinking water recognized as crucial in marathon running?
Would the melodic leap of the opening phrase of Mozart's K545 be considered dissonant?
When do _WA_Sys_ statistics Get Updated?
Is there a limit on the maximum number of future jobs queued in an org?
How can I handle a player who pre-plans arguments about my rulings on RAW?
When to use mean vs median
It doesn't matter the side you see it
How do you say “my friend is throwing a party, do you wanna come?” in german
Did Amazon pay $0 in taxes last year?
Practical reasons to have both a large police force and bounty hunting network?
In which way proportional valves are controlled solely by current?
Can an earth elemental drown/bury its opponent underground using earth glide?
PTIJ: What’s wrong with eating meat and couscous?
I can't die. Who am I?
How to fix my table, centering of columns
Is there a math equivalent to the conditional ternary operator?
Bootstrap: how to truly center an image in a column?
2019 Community Moderator ElectionHow to horizontally center a <div>?How to make div not larger than its contents?Vertically align text next to an image?How do I give text or an image a transparent background using CSS?How to disable text selection highlighting?How to check whether a checkbox is checked in jQuery?How to make a div 100% height of the browser window?How to disable resizable property of textarea?How do I vertically center text with CSS?Center a column using Twitter Bootstrap 3
1
I'd like to put 4 images in 4 stacked columns using Bootstrap. Here is my code:
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>The 4 images align to the left top (on a large screen), what I want is to align them vertically and horizontally in the center, regardless any changes of image width or height, how can I do it? I did my search online but nothing seems to truly solve the problem.
html css bootstrap-4
edited 9 hours ago
Fletcher Ripp
249212
asked 11 hours ago
thinkvantageduthinkvantagedu
708
add a comment |
1
I'd like to put 4 images in 4 stacked columns using Bootstrap. Here is my code:
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>The 4 images align to the left top (on a large screen), what I want is to align them vertically and horizontally in the center, regardless any changes of image width or height, how can I do it? I did my search online but nothing seems to truly solve the problem.
html css bootstrap-4
edited 9 hours ago
Fletcher Ripp
249212
asked 11 hours ago
thinkvantageduthinkvantagedu
708
Bootstrap comes with a range of classes that you can apply out of the box to center an object - getbootstrap.com/docs/4.3/utilities/flex
– Andrew
10 hours ago
add a comment |
1
1
1
I'd like to put 4 images in 4 stacked columns using Bootstrap. Here is my code:
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>The 4 images align to the left top (on a large screen), what I want is to align them vertically and horizontally in the center, regardless any changes of image width or height, how can I do it? I did my search online but nothing seems to truly solve the problem.
html css bootstrap-4
edited 9 hours ago
Fletcher Ripp
249212
asked 11 hours ago
thinkvantageduthinkvantagedu
708
I'd like to put 4 images in 4 stacked columns using Bootstrap. Here is my code:
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>The 4 images align to the left top (on a large screen), what I want is to align them vertically and horizontally in the center, regardless any changes of image width or height, how can I do it? I did my search online but nothing seems to truly solve the problem.
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html><html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>html css bootstrap-4
html css bootstrap-4
edited 9 hours ago
Fletcher Ripp
249212
asked 11 hours ago
thinkvantageduthinkvantagedu
708
edited 9 hours ago
Fletcher Ripp
249212
asked 11 hours ago
thinkvantageduthinkvantagedu
708
edited 9 hours ago
Fletcher Ripp
249212
edited 9 hours ago
Fletcher Ripp
249212
edited 9 hours ago
Fletcher Ripp
249212
249212
asked 11 hours ago
thinkvantageduthinkvantagedu
708
asked 11 hours ago
thinkvantageduthinkvantagedu
708
asked 11 hours ago
thinkvantageduthinkvantagedu
708
708
Bootstrap comes with a range of classes that you can apply out of the box to center an object - getbootstrap.com/docs/4.3/utilities/flex
– Andrew
10 hours ago
add a comment |
Bootstrap comes with a range of classes that you can apply out of the box to center an object - getbootstrap.com/docs/4.3/utilities/flex
– Andrew
10 hours ago
Bootstrap comes with a range of classes that you can apply out of the box to center an object - getbootstrap.com/docs/4.3/utilities/flex
– Andrew
10 hours ago
Bootstrap comes with a range of classes that you can apply out of the box to center an object - getbootstrap.com/docs/4.3/utilities/flex
– Andrew
10 hours ago
add a comment |
7 Answers
7
active
oldest
votes
2
Or you can do it with flexbox.
Add to your col-md-6
display: flex;
align-items: center;
justify-content: center
answered 11 hours ago
gionicgionic
18117
Thanks! Your class change solves my problem!
– thinkvantagedu
11 hours ago
add a comment |
1
This is the best way, making it responsive:
Add to your css:
.rounded
display:block;
margin-left: auto;
margin-right: auto;
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>answered 11 hours ago
Miguel CruzMiguel Cruz
38411
Your solution does not work if I change the width of the 2nd image to 100%, it only aligns the image to the center horizontally but not vertically
– thinkvantagedu
11 hours ago
add a comment |
0
use class text-center to column div
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6 text-center" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6 text-center" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6 text-center" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6 text-center" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>answered 11 hours ago
Saurabh MistrySaurabh Mistry
3,7941828
If I change width of the 2nd image to 100%, your solution only aligns the 1st image to center horizontally but not vertically.
– thinkvantagedu
11 hours ago
add a comment |
0
According to your code...you can just use margin-left:25%;. use img tag for all images. You can also use image class="text-center"
img
margin-left:25%;
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px;float:middle">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>answered 11 hours ago
LiNLiN
155
add a comment |
0
This will maybe help you. Please check below example.
.image-center
position: relative;
.image-center:after
display: inline-block;
padding-bottom: 100%;
content: "";
.image-center img
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
width: auto;
height: auto;
max-width: 70%;
max-height: 70%;
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-sm-6" style="background-color:lavenderblush">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
<div class="col-sm-6" style="background-color:lavender">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6" style="background-color:lavender">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
<div class="col-sm-6" style="background-color:lavenderblush">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>answered 11 hours ago
user10936942user10936942
261
New contributor
user10936942 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
0
@gionic solves the problem. Others won't work in this case:
.col-md-6
display: flex;
align-items: center;
justify-content: center
<html>
<head>
<h3>Align the 4 images to the center horizontally and vertically, even with height change of some images, rest images should still in the center.</h3>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="testImageCenter.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:70%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:40%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:80%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:100%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>With changes in height of some images, @gionic 's answer aligns all images to the center both horizontally and vertically.
Thanks all!
answered 11 hours ago
thinkvantageduthinkvantagedu
708
add a comment |
-1
You could use a center tag on the div. Or try putting the div inside the center tag.
<div class="col-md-6" style="background-color:lavenderblush">
<center>
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</center>
</div>
edited 10 hours ago
Zeeshan Ahmad Khalil
169117
answered 11 hours ago
shishir shishir
11
New contributor
shishir is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
As per MDN "[The center tag] is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.". Use CSStext-align: center;instead.
– Scoots
10 hours ago
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55021316%2fbootstrap-how-to-truly-center-an-image-in-a-column%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
7 Answers
7
active
oldest
votes
7 Answers
7
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
Or you can do it with flexbox.
Add to your col-md-6
display: flex;
align-items: center;
justify-content: center
answered 11 hours ago
gionicgionic
18117
Thanks! Your class change solves my problem!
– thinkvantagedu
11 hours ago
add a comment |
2
Or you can do it with flexbox.
Add to your col-md-6
display: flex;
align-items: center;
justify-content: center
answered 11 hours ago
gionicgionic
18117
Thanks! Your class change solves my problem!
– thinkvantagedu
11 hours ago
add a comment |
2
2
2
Or you can do it with flexbox.
Add to your col-md-6
display: flex;
align-items: center;
justify-content: center
answered 11 hours ago
gionicgionic
18117
Or you can do it with flexbox.
Add to your col-md-6
display: flex;
align-items: center;
justify-content: center
answered 11 hours ago
gionicgionic
18117
answered 11 hours ago
gionicgionic
18117
answered 11 hours ago
gionicgionic
18117
answered 11 hours ago
gionicgionic
18117
18117
Thanks! Your class change solves my problem!
– thinkvantagedu
11 hours ago
add a comment |
Thanks! Your class change solves my problem!
– thinkvantagedu
11 hours ago
Thanks! Your class change solves my problem!
– thinkvantagedu
11 hours ago
Thanks! Your class change solves my problem!
– thinkvantagedu
11 hours ago
add a comment |
1
This is the best way, making it responsive:
Add to your css:
.rounded
display:block;
margin-left: auto;
margin-right: auto;
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>answered 11 hours ago
Miguel CruzMiguel Cruz
38411
Your solution does not work if I change the width of the 2nd image to 100%, it only aligns the image to the center horizontally but not vertically
– thinkvantagedu
11 hours ago
add a comment |
1
This is the best way, making it responsive:
Add to your css:
.rounded
display:block;
margin-left: auto;
margin-right: auto;
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>answered 11 hours ago
Miguel CruzMiguel Cruz
38411
Your solution does not work if I change the width of the 2nd image to 100%, it only aligns the image to the center horizontally but not vertically
– thinkvantagedu
11 hours ago
add a comment |
1
1
1
This is the best way, making it responsive:
Add to your css:
.rounded
display:block;
margin-left: auto;
margin-right: auto;
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>answered 11 hours ago
Miguel CruzMiguel Cruz
38411
This is the best way, making it responsive:
Add to your css:
.rounded
display:block;
margin-left: auto;
margin-right: auto;
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>.rounded
display:block;
margin-left: auto;
margin-right: auto;
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>.rounded
display:block;
margin-left: auto;
margin-right: auto;
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>answered 11 hours ago
Miguel CruzMiguel Cruz
38411
answered 11 hours ago
Miguel CruzMiguel Cruz
38411
answered 11 hours ago
Miguel CruzMiguel Cruz
38411
answered 11 hours ago
Miguel CruzMiguel Cruz
38411
38411
Your solution does not work if I change the width of the 2nd image to 100%, it only aligns the image to the center horizontally but not vertically
– thinkvantagedu
11 hours ago
add a comment |
Your solution does not work if I change the width of the 2nd image to 100%, it only aligns the image to the center horizontally but not vertically
– thinkvantagedu
11 hours ago
Your solution does not work if I change the width of the 2nd image to 100%, it only aligns the image to the center horizontally but not vertically
– thinkvantagedu
11 hours ago
Your solution does not work if I change the width of the 2nd image to 100%, it only aligns the image to the center horizontally but not vertically
– thinkvantagedu
11 hours ago
add a comment |
0
use class text-center to column div
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6 text-center" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6 text-center" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6 text-center" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6 text-center" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>answered 11 hours ago
Saurabh MistrySaurabh Mistry
3,7941828
If I change width of the 2nd image to 100%, your solution only aligns the 1st image to center horizontally but not vertically.
– thinkvantagedu
11 hours ago
add a comment |
0
use class text-center to column div
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6 text-center" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6 text-center" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6 text-center" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6 text-center" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>answered 11 hours ago
Saurabh MistrySaurabh Mistry
3,7941828
If I change width of the 2nd image to 100%, your solution only aligns the 1st image to center horizontally but not vertically.
– thinkvantagedu
11 hours ago
add a comment |
0
0
0
use class text-center to column div
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6 text-center" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6 text-center" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6 text-center" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6 text-center" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>answered 11 hours ago
Saurabh MistrySaurabh Mistry
3,7941828
use class text-center to column div
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6 text-center" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6 text-center" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6 text-center" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6 text-center" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html><html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6 text-center" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6 text-center" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6 text-center" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6 text-center" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html><html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6 text-center" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6 text-center" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6 text-center" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6 text-center" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>answered 11 hours ago
Saurabh MistrySaurabh Mistry
3,7941828
answered 11 hours ago
Saurabh MistrySaurabh Mistry
3,7941828
answered 11 hours ago
Saurabh MistrySaurabh Mistry
3,7941828
answered 11 hours ago
Saurabh MistrySaurabh Mistry
3,7941828
3,7941828
If I change width of the 2nd image to 100%, your solution only aligns the 1st image to center horizontally but not vertically.
– thinkvantagedu
11 hours ago
add a comment |
If I change width of the 2nd image to 100%, your solution only aligns the 1st image to center horizontally but not vertically.
– thinkvantagedu
11 hours ago
If I change width of the 2nd image to 100%, your solution only aligns the 1st image to center horizontally but not vertically.
– thinkvantagedu
11 hours ago
If I change width of the 2nd image to 100%, your solution only aligns the 1st image to center horizontally but not vertically.
– thinkvantagedu
11 hours ago
add a comment |
0
According to your code...you can just use margin-left:25%;. use img tag for all images. You can also use image class="text-center"
img
margin-left:25%;
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px;float:middle">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>answered 11 hours ago
LiNLiN
155
add a comment |
0
According to your code...you can just use margin-left:25%;. use img tag for all images. You can also use image class="text-center"
img
margin-left:25%;
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px;float:middle">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>answered 11 hours ago
LiNLiN
155
add a comment |
0
0
0
According to your code...you can just use margin-left:25%;. use img tag for all images. You can also use image class="text-center"
img
margin-left:25%;
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px;float:middle">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>answered 11 hours ago
LiNLiN
155
According to your code...you can just use margin-left:25%;. use img tag for all images. You can also use image class="text-center"
img
margin-left:25%;
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px;float:middle">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>img
margin-left:25%;
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px;float:middle">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>img
margin-left:25%;
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px;float:middle">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>answered 11 hours ago
LiNLiN
155
answered 11 hours ago
LiNLiN
155
answered 11 hours ago
LiNLiN
155
answered 11 hours ago
LiNLiN
155
155
add a comment |
add a comment |
0
This will maybe help you. Please check below example.
.image-center
position: relative;
.image-center:after
display: inline-block;
padding-bottom: 100%;
content: "";
.image-center img
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
width: auto;
height: auto;
max-width: 70%;
max-height: 70%;
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-sm-6" style="background-color:lavenderblush">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
<div class="col-sm-6" style="background-color:lavender">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6" style="background-color:lavender">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
<div class="col-sm-6" style="background-color:lavenderblush">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>answered 11 hours ago
user10936942user10936942
261
New contributor
user10936942 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
0
This will maybe help you. Please check below example.
.image-center
position: relative;
.image-center:after
display: inline-block;
padding-bottom: 100%;
content: "";
.image-center img
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
width: auto;
height: auto;
max-width: 70%;
max-height: 70%;
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-sm-6" style="background-color:lavenderblush">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
<div class="col-sm-6" style="background-color:lavender">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6" style="background-color:lavender">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
<div class="col-sm-6" style="background-color:lavenderblush">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>answered 11 hours ago
user10936942user10936942
261
New contributor
user10936942 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
0
0
0
This will maybe help you. Please check below example.
.image-center
position: relative;
.image-center:after
display: inline-block;
padding-bottom: 100%;
content: "";
.image-center img
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
width: auto;
height: auto;
max-width: 70%;
max-height: 70%;
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-sm-6" style="background-color:lavenderblush">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
<div class="col-sm-6" style="background-color:lavender">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6" style="background-color:lavender">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
<div class="col-sm-6" style="background-color:lavenderblush">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>answered 11 hours ago
user10936942user10936942
261
New contributor
user10936942 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
This will maybe help you. Please check below example.
.image-center
position: relative;
.image-center:after
display: inline-block;
padding-bottom: 100%;
content: "";
.image-center img
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
width: auto;
height: auto;
max-width: 70%;
max-height: 70%;
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-sm-6" style="background-color:lavenderblush">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
<div class="col-sm-6" style="background-color:lavender">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6" style="background-color:lavender">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
<div class="col-sm-6" style="background-color:lavenderblush">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>.image-center
position: relative;
.image-center:after
display: inline-block;
padding-bottom: 100%;
content: "";
.image-center img
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
width: auto;
height: auto;
max-width: 70%;
max-height: 70%;
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-sm-6" style="background-color:lavenderblush">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
<div class="col-sm-6" style="background-color:lavender">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6" style="background-color:lavender">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
<div class="col-sm-6" style="background-color:lavenderblush">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>.image-center
position: relative;
.image-center:after
display: inline-block;
padding-bottom: 100%;
content: "";
.image-center img
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
width: auto;
height: auto;
max-width: 70%;
max-height: 70%;
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-sm-6" style="background-color:lavenderblush">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
<div class="col-sm-6" style="background-color:lavender">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6" style="background-color:lavender">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
<div class="col-sm-6" style="background-color:lavenderblush">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>answered 11 hours ago
user10936942user10936942
261
New contributor
user10936942 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 11 hours ago
user10936942user10936942
261
New contributor
user10936942 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 11 hours ago
user10936942user10936942
261
answered 11 hours ago
user10936942user10936942
261
261
New contributor
user10936942 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
user10936942 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
user10936942 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
0
@gionic solves the problem. Others won't work in this case:
.col-md-6
display: flex;
align-items: center;
justify-content: center
<html>
<head>
<h3>Align the 4 images to the center horizontally and vertically, even with height change of some images, rest images should still in the center.</h3>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="testImageCenter.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:70%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:40%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:80%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:100%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>With changes in height of some images, @gionic 's answer aligns all images to the center both horizontally and vertically.
Thanks all!
answered 11 hours ago
thinkvantageduthinkvantagedu
708
add a comment |
0
@gionic solves the problem. Others won't work in this case:
.col-md-6
display: flex;
align-items: center;
justify-content: center
<html>
<head>
<h3>Align the 4 images to the center horizontally and vertically, even with height change of some images, rest images should still in the center.</h3>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="testImageCenter.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:70%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:40%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:80%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:100%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>With changes in height of some images, @gionic 's answer aligns all images to the center both horizontally and vertically.
Thanks all!
answered 11 hours ago
thinkvantageduthinkvantagedu
708
add a comment |
0
0
0
@gionic solves the problem. Others won't work in this case:
.col-md-6
display: flex;
align-items: center;
justify-content: center
<html>
<head>
<h3>Align the 4 images to the center horizontally and vertically, even with height change of some images, rest images should still in the center.</h3>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="testImageCenter.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:70%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:40%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:80%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:100%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>With changes in height of some images, @gionic 's answer aligns all images to the center both horizontally and vertically.
Thanks all!
answered 11 hours ago
thinkvantageduthinkvantagedu
708
@gionic solves the problem. Others won't work in this case:
.col-md-6
display: flex;
align-items: center;
justify-content: center
<html>
<head>
<h3>Align the 4 images to the center horizontally and vertically, even with height change of some images, rest images should still in the center.</h3>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="testImageCenter.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:70%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:40%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:80%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:100%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>With changes in height of some images, @gionic 's answer aligns all images to the center both horizontally and vertically.
Thanks all!
.col-md-6
display: flex;
align-items: center;
justify-content: center
<html>
<head>
<h3>Align the 4 images to the center horizontally and vertically, even with height change of some images, rest images should still in the center.</h3>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="testImageCenter.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:70%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:40%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:80%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:100%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>.col-md-6
display: flex;
align-items: center;
justify-content: center
<html>
<head>
<h3>Align the 4 images to the center horizontally and vertically, even with height change of some images, rest images should still in the center.</h3>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="testImageCenter.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:70%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:40%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:80%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower"
style="width:100%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>answered 11 hours ago
thinkvantageduthinkvantagedu
708
answered 11 hours ago
thinkvantageduthinkvantagedu
708
answered 11 hours ago
thinkvantageduthinkvantagedu
708
answered 11 hours ago
thinkvantageduthinkvantagedu
708
708
add a comment |
add a comment |
-1
You could use a center tag on the div. Or try putting the div inside the center tag.
<div class="col-md-6" style="background-color:lavenderblush">
<center>
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</center>
</div>
edited 10 hours ago
Zeeshan Ahmad Khalil
169117
answered 11 hours ago
shishir shishir
11
New contributor
shishir is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
As per MDN "[The center tag] is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.". Use CSStext-align: center;instead.
– Scoots
10 hours ago
add a comment |
-1
You could use a center tag on the div. Or try putting the div inside the center tag.
<div class="col-md-6" style="background-color:lavenderblush">
<center>
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</center>
</div>
edited 10 hours ago
Zeeshan Ahmad Khalil
169117
answered 11 hours ago
shishir shishir
11
New contributor
shishir is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
As per MDN "[The center tag] is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.". Use CSStext-align: center;instead.
– Scoots
10 hours ago
add a comment |
-1
-1
-1
You could use a center tag on the div. Or try putting the div inside the center tag.
<div class="col-md-6" style="background-color:lavenderblush">
<center>
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</center>
</div>
edited 10 hours ago
Zeeshan Ahmad Khalil
169117
answered 11 hours ago
shishir shishir
11
New contributor
shishir is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
You could use a center tag on the div. Or try putting the div inside the center tag.
<div class="col-md-6" style="background-color:lavenderblush">
<center>
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</center>
</div>
edited 10 hours ago
Zeeshan Ahmad Khalil
169117
answered 11 hours ago
shishir shishir
11
New contributor
shishir is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited 10 hours ago
Zeeshan Ahmad Khalil
169117
edited 10 hours ago
Zeeshan Ahmad Khalil
169117
edited 10 hours ago
Zeeshan Ahmad Khalil
169117
169117
answered 11 hours ago
shishir shishir
11
New contributor
shishir is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 11 hours ago
shishir shishir
11
answered 11 hours ago
shishir shishir
11
11
New contributor
shishir is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
shishir is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
shishir is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
As per MDN "[The center tag] is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.". Use CSStext-align: center;instead.
– Scoots
10 hours ago
add a comment |
As per MDN "[The center tag] is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.". Use CSStext-align: center;instead.
– Scoots
10 hours ago
As per MDN "[The center tag] is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.". Use CSS
text-align: center; instead.– Scoots
10 hours ago
As per MDN "[The center tag] is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.". Use CSS
text-align: center; instead.– Scoots
10 hours ago
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55021316%2fbootstrap-how-to-truly-center-an-image-in-a-column%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Bootstrap comes with a range of classes that you can apply out of the box to center an object - getbootstrap.com/docs/4.3/utilities/flex
– Andrew
10 hours ago