Html Bootstrap 如何使文本在 div 容器中垂直对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25538732/
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
Bootstrap how to get text to vertical align in a div container
提问by The Nomad
What is the best/proper way to vertically align the text in the middle of its column? The image height is statically set in the CSS.
在其列中间垂直对齐文本的最佳/正确方法是什么？图像高度在 CSS 中静态设置。
I have tried setting an outer div to display: tableand an inner div to display: table-cellwith vertical-align: middlebut that didn't work either.
我曾尝试将外部 div 设置display: table为display: table-cellwith并将内部 div 设置为withvertical-align: middle但这也不起作用。
HTML
HTML
<section id="browse" class="browse">
<div class="container">
<div class="row">
<div class="col-md-5 col-sm-5">
<h2 class="text-left">Link up with other gamers all over the world who share the same tastes in games.</h2>
</div>
<div class="col-md-1"></div>
<div class="col-md-6 col-sm-7 animation_container">
<img id="animation_img2" class="animation_img animation_img2" src="images/section2img2.png"/>
<img id="animation_img1" class="animation_img animation_img1" src="images/section2img1.png"/>
</div>
</div>
</div>
</section>
CSS
CSS
.browse .container, .blind_dating .container { padding-bottom: 0; }
.animation_container { position: relative; }
.browse .animation_container { height: 430px; }
.animation_img { position: absolute; bottom: 0; }
.animation_img1 { right: 25%; }
.animation_img2 { right: 25%; }
回答by Fizzix
HTML:
HTML：
First, we will need to add a class to your text container so that we can access and style it accordingly.
首先，我们需要向您的文本容器添加一个类，以便我们可以相应地访问它并为其设置样式。
<div class="col-xs-5 textContainer">
<h3 class="text-left">Link up with other gamers all over the world who share the same tastes in games.</h3>
</div>
CSS:
CSS：
Next, we will apply the following styles to align it vertically, according to the size of the image div next to it.
接下来，我们将应用以下样式将其垂直对齐，根据它旁边的图像 div 的大小。
.textContainer {
height: 345px;
line-height: 340px;
}
.textContainer h3 {
vertical-align: middle;
display: inline-block;
}
All Done! Adjust the line-height and height on the styles above if you believe that it is still slightly out of align.
全部完成！如果您认为上面的样式仍然略微不对齐，请调整上面样式的行高和高度。
回答by Brian
h2.text-left{
position:relative;
top:50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
Explanation:
解释：
The top:50%style essentially pushes the header element down 50% from the top of the parent element. The translateY stylings also act in a similar manner by moving then element down 50% from the top.
的顶部：50％风格基本上推动头部元素下降50％从父元素的顶部。translateY 样式也通过将 then 元素从顶部向下移动 50% 以类似的方式起作用。
Please note that this works well for headers with 1 (maybe 2) lines of text as this simply moves the topof the header element down 50% and then the rest of the content fills in below that, which means that with multiple lines of text it would appear to be slightly below vertically aligned.
请注意，这适用于具有 1（也许 2）行文本的标题，因为这只是将标题元素的顶部向下移动 50%，然后其余内容填充在其下方，这意味着具有多行文本它似乎略低于垂直对齐。
A possible fix for multiple lines would be to use a percentage slightly less than 50%.
多行的可能解决方法是使用略小于 50% 的百分比。
回答by Thomas Byy
Could you not have simply added:
你能不能简单地添加：
align-items:center;
to a new class in your row div. Essentially:
到您行 div 中的一个新类。本质上：
<div class="row align_center">
.align_center { align-items:center; }
