Search code examples
htmlimagecssvertical-alignment

Bootstrap Vertical Align Image


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


Solution

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