[英]Bootstrap how to get text to vertical align in a div container
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: table
and an inner div to display: table-cell
with vertical-align: middle
but that didn't work either. 我已经尝试设置一个外部div来
display: table
和一个内部div来display: table-cell
with vertical-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%; }
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.
如果您认为它仍然略微不对齐,请调整上面样式的线高和高度。
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. 顶部:50%样式基本上将标题元素从父元素的顶部向下推50%。 The translateY stylings also act in a similar manner by moving then element down 50% from the top.
translateY样式也以类似的方式通过将元素从顶部向下移动50%来起作用。
Please note that this works well for headers with 1 (maybe 2) lines of text as this simply moves the top of 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%的百分比。
Could you not have simply added: 你能不能简单地补充一下:
align-items:center;
to a new class in your row div. 到你的行div中的新类。 Essentially:
实质上:
<div class="row align_center">
.align_center { align-items:center; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.