Vertical align in header elements

css, html, vertical-alignment

Solution

You can use

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

Demo (Note: I have increased wrapper's height to see it better)

Based on http://css-tricks.com/centering-in-the-unknown/, read it for a full explanation.

Problem

I know this got asked a lot here, but all the methods I am trying seem not to work for my code for some reason. I want to vertically align the text in the elements 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/ What I have already tried: (unsuccesfully) - setting line-height to 100% in headerElems - setting `display: table-cell` - putting it into a `ul` and `lis` and setting display:table and display:table-cell Can somebody provide me with a solution?

Original source