Html Twitter Bootstrap 3，垂直居中内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20005278/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap 3, vertically center content
提问by Jacques Bourque
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.
我知道这已被问了一千次，但我找不到使文本和图像垂直居中的方法。
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.
我正在使用带有动态内容的 Twitter Bootstrap 3，因此，我不知道文本和图像的大小。另外，我希望这一切都具有响应性。
I've created a bootplythat 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.
我创建了一个bootply，它总结了我想要实现的布局类型。基本上，我希望文本和图像垂直居中。文本并不总是比图像大。
Can someone help me out with this please?
有人可以帮我解决这个问题吗？
Thank you.
谢谢你。
采纳答案by DaniP
You can use display:inline-blockinstead of floatand vertical-align:middlewith this CSS:
你可以使用这个 CSSdisplay:inline-block代替float和vertical-align:middle：
.col-lg-4, .col-lg-8 {
float:none;
display:inline-block;
vertical-align:middle;
margin-right:-4px;
}
The demo http://bootply.com/94402
回答by Zim
Option 1is to use display:table-cell. You need to unfloat the Bootstrap col-* using float:none..
选项 1是使用display:table-cell. 您需要使用float:none..
.center {
display:table-cell;
vertical-align:middle;
float:none;
}
Option 2is display:flexto vertical align the row with flexbox:
选项 2是display:flex将行与 flexbox 垂直对齐：
.row.center {
display: flex;
align-items: center;
}
http://www.bootply.com/7rAuLpMCwr
http://www.bootply.com/7rAuLpMCwr
Vertical centering is very different in Bootstrap 4. See this answer for Bootstrap 4 https://stackoverflow.com/a/41464397/171456
Bootstrap 4 中的垂直居中非常不同。请参阅 Bootstrap 4 的此答案https://stackoverflow.com/a/41464397/171456
