one-hand-octopus
Reputation: 2743
Bootstrap: how to truly center an image in a column?
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.
Upvotes: 3
Views: 2186
Answers (6)
one-hand-octopus
Reputation: 2743
@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!
Upvotes: 0
user10936942
Reputation: 171
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>Upvotes: 0
LiN
Reputation: 125
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>Upvotes: 0
gikall
Reputation: 607
Or you can do it with flexbox.
Add to your col-md-6
display: flex;
align-items: center;
justify-content: center
Upvotes: 4
Saurabh Mistry
Reputation: 13669
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>Upvotes: 1
mindmaster
Reputation: 1888
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>Upvotes: 1
Related Questions
- How to align images in the middle right of a bootstrap column
- i can't center image in bootstrap row
- Bootstrap 4 center (horizontally) image + text inside div
- Center Image in Bootstrap
- How to center image over 2 columns in bootstrap
- "Centering" images with bootstrap's grid
- This image won't center in it's bootstrap column
- Bootstrap Image not centering
- How can I align an image to the center in a Bootstrap column?
- How to center an image within a col element in bootstrap 3+