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

在 Twitter Bootstrap 3 中垂直居中内容

在 Bootstrap 3 中处理动态内容时，常见的挑战是将文本和图像垂直居中，特别是当它们的大小可能不同时。以下是如何实现这种响应式垂直居中布局：

解决方案：

不要使用传统的 float 属性，而是选择 display:inline-block 并应用垂直-align:middle 到具有以下内容的相关元素CSS:

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

解释：

• display:inline-block 允许元素并排放置，同时保持应用高度和宽度的能力。
• vertical-align:middle 将元素的垂直中心与其中间对齐
• 负 margin-right 调整元素之间的间距，以获得更精细的布局。

演示：

现场直播演示，访问：http://bootply.com/94402

该方案保证文字和图片都是垂直的即使它们的大小动态变化，也能在各自的列中居中，从而提供响应灵敏且具有视觉吸引力的布局。

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