Bootstrap, how to align all image on the center? [duplicate] - html

Question

This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 2 years ago.
Currently my grid image were aligned like this
But my goal is to make the grid image like this, notice the "img 1" were aligned on the center. How to achieve this?
HTML
<div class="container">
<div class="row imagetiles">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src=https://i.imgur.com/nXSiWbw.jpg class="img-responsive">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src=https://i.imgur.com/0dXOdvZ.jpg class="img-responsive">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src=https://i.imgur.com/nXSiWbw.jpg class="img-responsive">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src=https://i.imgur.com/0dXOdvZ.jpg class="img-responsive">
</div>
</div>
</div>
CSS
div.imagetiles div.col-lg-3.col-md-3.col-sm-3.col-xs-6{
padding: 0px;
}
jsfiddle can be view here

Answer 1

Here is the Bootstrap 4 way to do so.
You can just add d-flex align-items-center class to the row:
<div class="container">
<div class="row imagetiles d-flex align-items-center">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 p-0">
<img src=https://i.imgur.com/nXSiWbw.jpg class="img-fluid">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 p-0">
<img src=https://i.imgur.com/0dXOdvZ.jpg class="img-fluid">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 p-0">
<img src=https://i.imgur.com/nXSiWbw.jpg class="img-fluid">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 p-0">
<img src=https://i.imgur.com/0dXOdvZ.jpg class="img-fluid">
</div>
</div>
</div>
Also, you used an incorrect version of Bootstrap 4 in your initial JSFiddle. Updated to the latest version at this moment. Also, the jQuery version used is also incorrect (you should notice an error in Developer Console).
To set a particular DIV to have zero padding, you can use Bootstrap layout help class p-0; you don't need to set it specifically in CSS.
Last, img-responsive is for Bootstrap 3, img-fluid is for Bootstrap 4. Don't mix them up.
JSFiddle: https://jsfiddle.net/shivanraptor/bq8covg5/7/

Answer 2

Change your CSS to:
div.imagetiles div.col-lg-3.col-md-3.col-sm-3.col-xs-6{
padding: 0px;
align-self: center;
}
div.imagetiles{
display: flex;
}
here's the jsfiddle

Answer 3

Simply add this to your CSS:
.imagetiles {
align-items: center;
display: flex;
}
jsfiddle here: https://jsfiddle.net/7snfxL4d/

Answer 4

You can use different approaches but the flex one is really easy like this :
.imagetiles{
display: inline-flex;
align-items: baseline;
}

Answer 5

Try to add class my-auto to your img tag
If 1st dont work try to make the whole row a flex-wrap with classes d-flex align-content-center flex-wrap
You can find more here.