Bootstrap Vertical Align Image

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="row">
        <div class="col-md-5">
            <a href="#">
                <img src="images/image.jgp">
            </a>
        </div>
        <div class="col-md-7">
           // text goes here
        </div>
    </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.