Question

我知道这已被问了一千次，但我找不到让文字和图像垂直居中的方法。

我正在使用带有动态内容的Twitter Bootstrap 3，因此，我不知道文本和图像的大小。另外，我希望所有人都能做出回应。

我创建了一个bootply，总结了我想要实现的布局。基本上，我希望文本和图像垂直居中。文字并不总是比图像大。

有人可以帮我解决这个问题吗？

谢谢。

Answer 1

您可以在此CSS中使用display:inline-block代替float和vertical-align:middle：

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

Answer 2

选项1 是使用display:table-cell。您需要使用float:none ..

释放Bootstrap col- *

.center {
    display:table-cell;
    vertical-align:middle;
    float:none;
}

选项2 display:flex将行与flexbox垂直对齐：

.row.center {
   display: flex;
   align-items: center;
}

Bootstrap 4 中的垂直居中非常不同。请参阅Bootstrap 4 https://stackoverflow.com/a/41464397/171456

的答案