Bootstrap垂直对齐图像

贡萨洛·洛雷罗(GonçaloLoureiro)

在此网站上:http : //www.livenews.surf/我想使新闻图像和文本垂直居中对齐,我该怎么做?

里奥·拿破仑(Leo Napoleon)

最简单的解决方案是使用Flexbox(有关其用法的更多详细信息,请参见规格)。

对于这种特殊情况,请为每个包含div的内容(当前仅包含.col-md-11分配一个自定义类,例如“ content”类,然后将此代码添加到样式表中

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

小代码说明:align-items由于我们保留了默认的flex方向(即row),flex-wrap因此可以垂直对齐项目,该默认flex方向为row,这将允许我们的父容器将子级包装到下一行(默认值为nowrap)。

请记住,为了得到这个答案,我没有包括供应商前缀,但是我强烈建议您使用诸如Autoprefixer之类的工具来这样做。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章