Html Twitter引导3，垂直中心内容

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

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

我已经创建了一个总结了我试图实现的布局。基本上，我希望文本和图像垂直居中。文本并不总是大于图像

有人能帮我解决这个问题吗

---

谢谢。

选项1是使用

显示：表格单元格

。您需要使用

float:none

解除引导列col-*的浮动

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

---

选项2是

display:flex

将行与flexbox垂直对齐：

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

---

---

在引导程序4中，垂直定心非常不同。查看引导4的此答案您可以使用

显示：内联块

而不是

浮动

和

垂直对齐：中间

与此CSS：

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

---

演示

谢谢Skelly！我以前尝试过像你这样的解决方案，但我没有找到“float:none”。另外，在我的实际项目中，我在定义“col-sm-x”的同一个“”上设置了“hidden xs”。现在效果很好！我刚刚碰到一个小问题。我现在失去了img响应功能。有没有一种方法可以同时使用（响应和居中）？我必须将Danko的anwser标记为已接受，因为它修复了图像的垂直对齐和响应特性。我猜问题是因为我们更改了行和/或列上的“display”设置或设置一个特定的高度以使其工作。当列换行时，此解决方案对我来说会中断：。谢谢Danko，您的解决方案确实有效，但我不太喜欢设置负边距。我甚至不知道-4从哪里来。无论如何，谢谢你抽出时间！：）内联块元素解释html标记中的空白，并留下一点空白。。。您可以将html设置为全部内联，或者让此解决方案查看此提琴以澄清概念如果您将边距减少为负数，那么您将看到space@JacquesBourque为了更清楚地说明这一点，请检查此链接，我发现此解决方案不再有效（请注意，行的每一列都必须实现该类。如果其中一列未实现该类，则该列将失败。）。