我试图在 bootstrap 中将文本垂直居中。我找到了 this soulution ,但是当我将 .vcenter
类添加到我的代码时,它与我的 Bootstrap 行的格式冲突。我希望将行分成 3 列,每列 4 宽。一个用于文本,两个用于图像。这是我在将 .vcenter
类添加到我的代码之前所拥有的:
我的代码:
<div class="container">
<section class="row start-day ">
<div class="col-sm-4 start-day-text vcenter">
<h2>im a body of text that i cant get to vertically align</h2>
</div>
<div class="col-sm-4 phone ">
<%= image_tag 'hand.png', class: 'demo', alt: 'Brieff demo' %>
</div>
<div class="col-sm-4 hand ">
<%= image_tag 'hand2.png', class: 'demo', alt: 'Brieff demo' %>
</div>
</section>
</div>
最佳答案
使用以下 html:
<div class="container">
<section class="row body">
<div class="col-sm-4 fullheight">
im a body of text that i cant get to vertically align
</div>
<div class="col-sm-4 fullheight">
<img src="tabletPic1_80_o.png" />
</div>
<div class="col-sm-4 fullheight">
<img src="tabletPic1_80_o.png" />
</div>
</section>
</div>
应用以下CSS:
.body
{
height:100%;
background-color: antiquewhite;
display: inline;
}
.fullheight
{
color:white;
background:red;
border: 1px solid;
display: inline-block;
vertical-align: middle;
float: none;
}
关于html - Bootstrap 中的垂直对齐会导致格式错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36007490/