On this website: http://www.livenews.surf/ I want to make news images and text vertically middle align, how i can do that?
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.