Twitter Bootstrap 3，垂直居中内容 [英] Twitter Bootstrap 3, vertically center content

问题描述

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

I know this has been asked a thousand time but I can't find a way to make the text and image to be centered vertically.

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

I'm using Twitter Bootstrap 3 with dynamic content so therefor, I do not know the size on neither the text nor the image. Plus, I want it all to be responsive.

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

I've created a bootply that summarize the kind of layout I'm trying to achieve. Basically, I want the text and image to be vertically centered. The text is not always bigger than the image.

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

Can someone help me out with this please?

谢谢.

推荐答案

您可以使用 display:inline-block 代替 float 和 vertical-align:中间与此CSS:

You can use display:inline-block instead of float and vertical-align:middle with this CSS:

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

演示http://bootply.com/94402

The demo http://bootply.com/94402

这篇关于Twitter Bootstrap 3，垂直居中内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！