Twitter Bootstrap 3，内容垂直居中
Twitter Bootstrap 3，内容垂直居中
提问于 2013-11-16 00:02:12
我知道这已经被问了一千次了，但我找不到一种方法来使文本和图像垂直居中。
我使用的是带有动态内容的Twitter Bootstrap 3，因此，我不知道文本和图像上的大小。另外，我希望这一切都是响应性的。
我已经创建了一个bootply，它总结了我试图实现的布局类型。基本上，我希望文本和图像垂直居中。文本并不总是比图像大。
有人能帮我解决这个问题吗？
谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-11-16 00:48:54
您可以使用display:inline-block而不是float和vertical-align:middle来处理此CSS：
.col-lg-4, .col-lg-8 {
float:none;
display:inline-block;
vertical-align:middle;
margin-right:-4px;
}演示
Stack Overflow用户
发布于 2013-11-16 00:39:59
选项1是使用display:table-cell。您需要使用float:none取消Bootstrap col1-*的浮动。
.center {
display:table-cell;
vertical-align:middle;
float:none;
}选项2是display:flex，以便将行与flexbox垂直对齐：
.row.center {
display: flex;
align-items: center;
}http://www.bootply.com/7rAuLpMCwr
垂直居中在Bootstrap 4中有很大的不同。有关Bootstrap 4 https://stackoverflow.com/a/41464397/171456，请参阅此答案
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20005278
复制相关文章
相似问题
腾讯云开发者
