列中垂直对齐引导文本
列中垂直对齐引导文本
提问于 2016-04-18 02:03:18
我有两个列布局，左边列有嵌套列。在引导中，我将如何垂直地将右边列中的文本对齐？
我试过设定最高值:50%，但什么也没发生。我也试过使用垂直对齐:中间。
<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>干杯!
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-04-18 02:31:40
不知道这是不是你想要的。
但你可以设定高度然后垂直对齐。
<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>然后添加这个css
此处使用的/* CSS将在bootstrap.css */之后应用。
.box-section
{
position: relative;
top: 50%;
transform: translateY(-50%);
}问题是它不会响应于设置的高度值，但是可以在css中单独设置它。
http://www.bootply.com/FOsl3LiKn1
Stack Overflow用户
发布于 2016-04-18 02:44:59
我认为AceWebDesign的答案是正确的，但是您可以在不设置正确的列高和框节类的情况下达到同样的效果：
.box-section{
margin-top:50%;
transform: translateY(-50%);
}分叉代码段：http://www.bootply.com/84dXtE0F2B
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36684380
复制相关文章
相似问题
腾讯云开发者
