Bootstrap垂直对齐图像

问题描述

在这个网站上：我想制作新闻图片和文本垂直居中对齐，我怎么做到这一点？

解决方案

最简单的解决方案是使用Flexbox（详细信息请参阅在这种情况下，为每个包含div的内容分配一个自定义类（目前它只有 为了这个答案，但我强烈建议你这样做，使用一个工具，如Autoprefixer。

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.

这篇关于Bootstrap垂直对齐图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！