html - 标题元素中的垂直对齐

Question

我知道这个问题在这里被问了很多，但出于某种原因，我正在尝试的所有方法似乎都不适用于我的代码。

我想垂直对齐元素中的文本

HTML:

<div id="mainWrapper">
    <div id="header"> 
        <div id="logo" class="headerElements">
            <h:outputText class="headerText" value="RedPrice" />
        </div>
        <div id="login" class="headerElements">
            <h:outputText class="headerText" value="Login" />
        </div>
        <div id="register" class="headerElements">
            <h:outputText class="headerText" value="Register" />
        </div>
        <div id="follow" class="headerElements">
            <h:outputText class="headerText" value="Follow us" />
        </div>
    </div>
</div>

CSS:

*{
    margin:0;
    padding:0;
}

body,html {
    height: 100%;
    font-family: 'Quicksand', sans-serif;
}

div#mainWrapper {
    height: 100%;
    width: 100%;
    background: url(../images/women.jpg) no-repeat center center;
}

div#header {
    width: 100%;
    height: 5%;
    background: white;
    opacity: 0.5;
}

div.headerElements {
    float: left;
    height: 100%;
    width: 10%;
    text-align: center;
}

div.headerElements:hover {
    background: orangered;
    opacity: 0.5;
}

.headerText {
    font-size: x-large; 
}

http://jsfiddle.net/E7DAe/

我已经尝试过的:(未成功)

• 在 headerElems 中将行高设置为 100%
• 设置显示:表格单元格
• 将其放入 ul 和 lis 并设置 display:table 和 display:table-cell

谁能给我一个解决方案？

Answer 1

你可以使用

div.headerElements:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

Demo (注意:我增加了 wrapper 的高度以便看得更清楚)

基于 http://css-tricks.com/centering-in-the-unknown/ ，阅读它以获得完整的解释。