如何在Bootstrap 3中实现完美的垂直文本和图像对齐？

Twitter Bootstrap 3 中的垂直文本和图像对齐

尽管对此主题的查询很普遍，但在 Twitter Bootstrap 3 中实现文本和图像的垂直对齐Twitter Bootstrap 3 可能难以捉摸，特别是对于具有不同尺寸的动态内容。

要解决为了应对这一挑战，我们创建了一个 Bootply 演示来说明所需的布局，其中文本和图像垂直居中，无论它们的相对大小如何。

解决方案在于使用 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;
}

通过将margin-right设置为负值，我们确保列并排放置，同时保持它们的垂直对齐.

要测试此方法，请导航至 http://bootply.com/94402 上的演示，其中文本和图像正确垂直居中，以适应不同的内容尺寸。

以上是如何在Bootstrap 3中实现完美的垂直文本和图像对齐？的详细内容。更多信息请关注PHP中文网其他相关文章！