Bootstrap Vertical Align Image - html

Question

On this website: http://www.livenews.surf/ I want to make news images and text vertically middle align, how i can do that?

Answer 1

Use the following classes in your containing div.row instead of custom CSS as suggested for bootstrap 4.
d-flex flex-wrap align-items-center

Answer 2

The easiest solution is to use Flexbox (see spec. for more details on it's usage).
For this particular case, assign a custom class to each of your content containing div (currently it only has .col-md-11), for example class "content" and add this code to your stylesheet
.content {
display: flex;
align-items: center;
flex-wrap: wrap;
}
Small code explanation: align-items aligns the items vertically, since we left the default flex direction which is row and flex-wrap will allow our parent container to wrap children to next line (default is nowrap).
Keep in mind, that I haven't included vendor prefixes for the sake of this answer, however I would strongly recommend you to do so, using a tool such as Autoprefixer.

Answer 3

Well, As you are using bootstrap columns, so you will need to make by following a couple of steps as explained below:
As a general case html structure of your web page is as follows:
<div class="col-md-11">
<div class="col-md-5">
<a href="#">
<img src="images/image.jgp">
</a>
</div>
<div class="col-md-7">
// text goes here
</div>
</div>
First of all you will need to make the height of both columns (image + text) same. For this you can use jQuery matchHeight.
After that you can make your images vertically centered with the help of following change.
<div class="col-md-5 photo">
<a href="#">
<img src="images/image.jgp">
</a>
</div>
.photo {
display: table;
}
.photo a {
vertical-align: middle;
display: table-cell;
}
.photo img {
display: block;
height: auto;
width: 100%;
}
Here is Plnkr.