Twitter Bootstrap 3，垂直居中内容[重复]答案

【问题标题】：Twitter Bootstrap 3, vertically center content [duplicate]Twitter Bootstrap 3，垂直居中内容[重复]
【发布时间】：2013-11-29 02:15:26
【问题描述】：

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

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

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

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

谢谢。

【问题讨论】：

【解决方案1】：

选项 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

【讨论】：

谢谢斯凯利！我之前尝试过像你这样的解决方案，但我错过了'float：none'。另外，在我的实际项目中，我将 'hidden-xs' 设置在与定义 'col-sm-x' 相同的 '
' 上。现在效果很好！
我刚刚遇到了一个小问题。我现在失去了 img 响应功能。有没有办法同时拥有（响应式和居中）？
我必须将 Danko 的 anwser 标记为已接受，因为它修复了图像的垂直对齐和响应特性。我想问题出在我们改变了行和/或列上的“显示”这一事实。
记住，父元素必须要么设置了display: table;，要么设置了特定的高度才能正常工作。
当列换行时，这个解决方案对我来说会中断：getbootstrap.com/css/#grid-example-wrapping.

【解决方案2】：

您可以在此 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;
}

【讨论】：

感谢 Danko，您的解决方案确实有效，但我不喜欢设置负边距。我什至不确定-4从哪里来。无论如何，谢谢你的时间！ :)
好吧，inline-block 元素解释了 html 标记中的空白并留下了一点空白……您可以将 html 全部设置为内联或获取此解决方案，请参阅此小提琴以澄清概念 @987654322 @如果你减少边距负数，那么你会看到空格
@JacquesBourque 更清楚地查看我找到的这个链接css-tricks.com/fighting-the-space-between-inline-block-elements
此解决方案不再有效。 :(
请注意，行的每一列都必须实现该类。如果其中一列没有实现它，它就会失败。