如何在 Twitter Bootstrap 3 中垂直居中内容？

在 Twitter Bootstrap 3 中垂直居中内容

许多用户在 Twitter Bootstrap 3 中垂直居中文本和图像时遇到了挑战。本文提供一种利用响应式和动态内容的解决方案。

一种方法是利用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;
}

This将使文本和图像居中，无论它们的相对大小如何。

可在以下位置获得工作演示http://bootply.com/94402，展示内容如何动态响应屏幕分辨率变化，同时保持垂直对齐。

以上是如何在 Twitter Bootstrap 3 中垂直居中内容？的详细内容。更多信息请关注PHP中文网其他相关文章！