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

Twitter Bootstrap 3 中的垂直居中内容

要在 Bootstrap 3 中实现文本和图像的响应式动态垂直对齐，请考虑以下方法:

CSS代码：

.col-lg-4, .col-lg-8 {
    float: none;
    display: inline-block;
    vertical-align: middle;
    margin-right: -4px;
}

说明：

提供的CSS对原始Bootstrap列进行了必要的更改：

• float : none 删除水平对齐，允许垂直对齐。
• 显示： inline-block 将列视为内联元素，可以垂直对齐。
• vertical-align：中间垂直居中列中的内容。
• margin-right：-4px 纠正较小的间距问题之间

演示：

访问 [http://bootply.com/94402](http://bootply. com/94402）查看此功能的演示

附加说明：

• 确保容器元素有足够的高度以便垂直对齐。
• 如果您需要不同的列大小，相应地调整 col-lg 类。
• 如果遇到不同图像大小的问题，请调整 Vertical-align 属性根据需要。

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