Twitter Bootstrap 3，垂直中心内容

我知道这已经被问了一千次，但我找不到一种方式来使文本和图像垂直居中。

我正在使用带有dynamic内容的Twitter Bootstrap 3，因此我不知道文本和图像的大小。另外，我希望这一切都是响应。

我已经创build了一个总结我尝试实现的布局types的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; }

选项1是使用display:table-cell 。你需要使用float:none来展开Bootstrap col- *。

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

选项2是display:flex垂直alignment行与flexbox：

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

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