Geek Answers Handbook

Return vertical alignment of Bootstrap image

On this website: http://www.livenews.surf/ I want to make news images and center them vertically, how can I do this?

+9
source share
3 answers

The easiest solution is to use Flexbox (see the description for use for details).

In this particular case, assign a custom class for each of your content containing the div (currently it only has .col-md-11 ), for example the "content" class, and add this code to the stylesheet

 .content { display: flex; align-items: center; flex-wrap: wrap; }

Explanation of the small code: align-items aligns the elements vertically, since we left the default direction of flexibility, which is a string, and flex-wrap will allow our parent container to flex-wrap children on the next line ( nowrap by default).

Keep in mind that I did not include vendor prefixes for this answer, however I highly recommend that you do this using a tool like Autoprefixer.

+17
source

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

+6
source

Well, since you are using bootstrap columns, so you will need to follow these steps as described below:

In general, the 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) the same. You can use jQuery matchHeight for this . After that, you can make the images vertically centered using the following changes.

 <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 .

+4
source

More articles:


All Articles