垂直对齐内联元素中的文本

Question

Problem

So I'm creating a simple navigation menu which contains a div of a tags. Currently it looks like this:

The follow are my HTML and CSS:

HTML

<div id="tabcontent-container">
    <div class="tabcontent-menu">
        <a href="#">WLAN Jumpstart</a>
        <a href="#">Mobility</a>
        <a href="#">Guest Access Jumpstart</a>
    </div>
</div>

The CSS

#tabcontent-container { padding: 15px 0px; position: relative; text-align: center; border-radius: 25px; -webkit-border-radius: 25px; }
.tabcontent-menu {}
.tabcontent-menu a { text-decoration: none; color: white; font-size: 30px; border-right: 1px solid white; line-height: 33px; padding: 0 22px; display: inline-block; width: 200px; height: 70px; vertical-align: top; }
.tabcontent-menu a:last-child { border:none; }
.tabcontent-menu a:hover { color:#000; }

Working example on Jsfiddle.net

The Question

I'm wondering if there is an easier way to align the middle "Mobility" a tag to the middle. The other two links look fine because they are double line. I purposely made them double line for a reason, and now just need the middle one to middle align some how.

Any suggestions?

Answer 1

You can use vertical-align: middle to adjust the position vertically. Since that only works on table cells, set display: table-cell for the .tabcontent-menu a

http://jsfiddle.net/H9VHs/8/

Answer 2

I usually accomplish something like this by varying the line-height .

.tabcontent-menu a.midline {
 line-height: 64px;   
}

See it here: http://jsfiddle.net/PZVnq/

Documentation/Further Reading

• CSS line-height on MDN - https://developer.mozilla.org/en/CSS/line-height
• Lauri Raittilan on Vertical centering with CSS - http://www.student.oulu.fi/~laurirai/www/css/middle/
• Vertical centering with CSS on vanseodesign.com - http://www.vanseodesign.com/css/vertical-centering/