[英]Vertical Align bootstrap text in column
I have a two column layout with nested columns on the left column. 我有一个两列布局,左列有嵌套列。 How would i vertically align the text in the right column to the middle in bootstrap? 如何将右列中的文本垂直对齐到引导程序中的中间?
I have tried setting top:50% but nothing happens. 我试过设置顶部:50%但没有任何反应。 And i have also tried using the vertical-align:middle. 我也试过使用vertical-align:middle。
<div class="container-fluid">
<div class="row">
<div class="col-lg-6"> <!-- Left Column-->
<div class="row">
<div class="col-lg-6" style="height: 350px; background-color: red;">1</div>
<div class="col-lg-6" style="height: 350px">2</div>
<div class="col-lg-6" style="height: 350px">3</div>
<div class="col-lg-6" style="height: 350px; background-color: red">4</div>
</div>
</div>
<div class="col-lg-6"> <!-- Right Column-->
<div class="box-section">
<h2 class="custom-font font-xx">THIS TEXT<br>
Metals & O-rings</h2>
<h4 class="custom-font font-sub">THIS TEXT</h4>
</div>
</div>
</div>
</div>
Cheers! 干杯!
Not sure if it's exactly what you are after. 不确定它是否正是你所追求的。
but you could set the height and then vertical align. 但你可以设置高度然后垂直对齐。
<div class="container-fluid">
<div class="row">
<div class="col-lg-6"> <!-- Left Column-->
<div class="row">
<div class="col-lg-6" style="height: 350px; background-color: red;">1</div>
<div class="col-lg-6" style="height: 350px">2</div>
<div class="col-lg-6" style="height: 350px">3</div>
<div class="col-lg-6" style="height: 350px; background-color: red">4</div>
</div>
</div>
<div class="col-lg-6" style="height:700px"> <!-- Right Column-->
<div class="box-section">
<h2 class="custom-font font-xx">THIS TEXT<br>
Metals & O-rings</h2>
<h4 class="custom-font font-sub">THIS TEXT</h4>
</div>
</div>
</div>
</div>
Then add this css 然后添加这个CSS
/* CSS used here will be applied after bootstrap.css */ / *这里使用的CSS将在bootstrap.css之后应用* /
.box-section
{
position: relative;
top: 50%;
transform: translateY(-50%);
}
Problem is it won't be responsive with the set height values, however you could set that up seperately in the css 问题是它不会响应设定的高度值,但你可以在css中单独设置
http://www.bootply.com/FOsl3LiKn1 http://www.bootply.com/FOsl3LiKn1
I think that AceWebDesign answer is correct but you can achieve the same effect without setting the right column height and with the box section class as this: 我认为AceWebDesign的答案是正确的,但你可以在不设置正确的列高度和盒子类类的情况下实现相同的效果:
.box-section{
margin-top:50%;
transform: translateY(-50%);
}
forked snippet: http://www.bootply.com/84dXtE0F2B 分叉片段: http : //www.bootply.com/84dXtE0F2B
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.