如何将文本垂直对齐到具有绝对位置的标题的中间。我想要文本是1行还是2行,使其位于绿色块的中间。
这是一个示例:https : //jsfiddle.net/DTcHh/7467/
<div class="row">
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that needs</h4>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that</h4>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that needs</h4>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that needs</h4>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that</h4>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that needs</h4>
</div>
</div>
</div>
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.holder {
position:relative;
display: table;
width: 100%;
}
.background {
background: #000;
height: 150px;
width: 100%;
}
.text {
position: absolute;
left:0;
right: 0;
bottom: 0;
text-align: center;
}
h4 {
background: green;
font-size: 1em;
margin: 0;
padding: 5px 10px;
min-height: 50px;
}
像这样 ....
我相信可能有这个版本。
更改<h4>
为<p>
已经从...删除 <p>
width: 100%;
display: table-cell;
添加到 <p>
margin-left: auto;
margin-right: auto;
transform: translateY(25%);
更改为 <p>
padding: 5px 10px;
-到- padding: 0px 10px;
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句