Bootstrap 如何使文本在 div 容器中垂直对齐
[英] Bootstrap how to get text to vertical align in a div container
本文介绍了Bootstrap 如何使文本在 div 容器中垂直对齐的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在其列中间垂直对齐文本的最佳/正确方法是什么?图像高度在 CSS 中静态设置.
我尝试将外部 div 设置为 display: table
,将内部 div 设置为 display: table-cell
和 vertical-align: middle
> 但这也没有用.
HTML
<div class="容器"><div class="row"><div class="col-md-5 col-sm-5"><h2 class="text-left">与世界各地拥有相同游戏品味的其他玩家建立联系.</h2>
<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"/>
</节>
CSS
.browse .container, .blind_dating .container { padding-bottom: 0;}.animation_container { 位置:相对;}.browse .animation_container { 高度:430px;}.animation_img { 位置:绝对;底部:0;}.animation_img1 { 右:25%;}.animation_img2 { 右:25%;}
解决方案
HTML:
首先,我们需要向您的文本容器添加一个类,以便我们可以相应地访问它并为其设置样式.
<h3 class="text-left">与世界各地拥有相同游戏品味的其他玩家建立联系.</h3>
CSS:
接下来,我们将根据旁边的图像 div 的大小应用以下样式将其垂直对齐.
.textContainer {高度:345px;行高:340px;}.textContainer h3 {垂直对齐:中间;显示:内联块;}
大功告成!如果您认为仍然略微不对齐,请调整上面样式的行高和高度.
工作示例
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.
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.
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
.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:
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:
Next, we will apply the following styles to align it vertically, according to the size of the image div next to it.
.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.
WORKING EXAMPLE
这篇关于Bootstrap 如何使文本在 div 容器中垂直对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!