Question

如何将文本垂直对齐到具有绝对位置的标题的中间。我希望文本是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;
}

Answer 1

已更新

喜欢这个......

FIDDLE v4

我认为这个版本可能有它。

将<h4>更改为<p>

已从<p>

中删除

width: 100%;
display: table-cell;

已添加到<p>

margin-left: auto;
margin-right: auto;
transform: translateY(25%);

对<p>

的更改

padding: 5px 10px; -TO - padding: 0px 10px;

Answer 2

在line-height样式上使用h4，其值超过font-size的两倍：

h4 {

    background: green;
    font-size: 1em;
    margin: 0;
    padding: 5px 10px;
    min-height: 50px; 
   line-height: 2.2em;

}

结帐DEMO

图像上的垂直对齐标题文本

2 个答案:

已更新