html - css文本在响应式网站中垂直对齐

Question

我在这样的 div 中有一个标题

当我将浏览器缩小时，它看起来像这样:

但我希望它看起来像这样:

我该怎么做？

html:

<div class="wrapper">
        <h4>ALongText LikeThisOne</h4>
</div>

CSS:

.wrapper{
    border:1px red solid;
    height:60px;
}

.wrapper h4{
    margin-top: 0;
    padding-top: 20px;
    text-align: center;
}

jsfiddle:http://jsfiddle.net/4cBxt/

Answer 1

您还可以尝试 transform 属性:

.wrapper h4 {
    margin-top: 0;
    position: relative;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

<强> Working fiddle