Twitter Bootstrap 3,垂直中心内容

Question

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

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

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

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

谢谢.

Answer 1

您可以使用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;
}

此解决方案不再起作用.:( (4认同)
请注意,该行的每一列都必须实现该类.如果其中一列未实现,则失败. (3认同)
@JacquesBourque为了更清楚地检查这个链接,我找到了http://css-tricks.com/fighting-the-space-between-inline-block-elements/ (2认同)

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 /sf/answers/2902507821/的答案

请记住,父元素必须具有`display:table;`set或具有特定的高度设置才能使其工作. (4认同)
谢谢Skelly!我之前尝试过像你这样的解决方案,但我错过了'float:none'.另外,在我的真实项目中,我将'hidden-xs'设置在与定义'col-sm-x'相同的'<div>'上.现在很棒! (3认同)
当列包裹时,这个解决方案对我来说很麻烦:http://getbootstrap.com/css/#grid-example-wrapping. (2认同)