文字不会垂直居中？
文字不会垂直居中？
提问于 2014-09-30 23:10:18
我一直试图让文本垂直中心像这个http://i.imgur.com/Vb7NuTV.png，但它似乎不想对齐。
@import url('http://getbootstrap.com/dist/css/bootstrap.min.css');
h4 {
margin-top: 25px;
}
.row {
margin-bottom: 20px;
}
.row .row {
margin-top: 10px;
margin-bottom: 0;
}
[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86, 61, 124, .15);
border: 1px solid #ddd;
border: 1px solid rgba(86, 61, 124, .2);
height: 250px;
}
hr {
margin-top: 40px;
margin-bottom: 40px;
}
.innertext {
display: inline-block;
width: 90%
}
.label {
position: absolute;
top: 50%;
margin-top: -10px;
}<div class="container">
<div class="row">
<div class="col-md-4">
<div class="innertext">Text Test Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div>
</div>
</div>
</div>
Jsfiddle：http://jsfiddle.net/r0gsewtd/1/
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-09-30 23:16:33
给你：小提琴
.innertext {
position: relative;
transform: translateY(-50%);
top: 50%;
}Stack Overflow用户
发布于 2014-09-30 23:19:08
[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86, 61, 124, .15);
border: 1px solid #ddd;
border: 1px solid rgba(86, 61, 124, .2);
height: 250px;
display: table-cell;
vertical-align: middle;
}将最后2行添加到[class*="col-"]中
display: table-cell;
vertical-align: middle;您还可以检查以下内容：如何使用CSS垂直对文本进行居中？
Stack Overflow用户
发布于 2014-10-01 04:06:09
通过应用表显示属性add，可以垂直对文本进行居中。
display:table;到父类，div-col md-4然后添加
display:table-cell;
vertical-align:middle;转到.innertext
演示
然后代码变成
.col-md-4 {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86, 61, 124, .15);
border: 1px solid #ddd;
border: 1px solid rgba(86, 61, 124, .2);
height: 250px;
display:table;
}
.innertext {
display:inline-block;
width:90%;
display:table-cell;
vertical-align:middle;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26131663
复制相关文章
相似问题
腾讯云开发者
