Vertical alignment of text inside a span

Question

JSFiddle here - http://jsfiddle.net/2R36y/

The corresponding range code is

CSS

nav ul li a span { font: 30px"Dosis", sans-serif; text-transform: uppercase; position: relative; left: 120px; width: inherit; height: inherit; display: none; text-align: left; } 

HTML

 <nav> <ul> <li> <a href="#"> <span>Home</span> </a> </li> <li> <a href="#"> <span>About</span> </a> </li> <li> <a href="#"> <span>Portfolio</span> </a> </li> <li> <a href="#"> <span>Contact</span> </a> </li> </ul> </nav> 

Answer 1

One way is to use display: table-cell; and vertical-align: middle; - you can also use line-height , since <span> has a fixed height.

 nav ul li a:hover span { font: 30px"Dosis", sans-serif; text-transform: uppercase; position: relative; left: 120px; width: inherit; height: inherit; display: table-cell; vertical-align: middle; text-align: left; } 

http://jsfiddle.net/2R36y/1/

Answer 2

Use display:table .

 nav ul li { list-style: none; margin: 0 0 0 0; display: table; } nav ul li a:hover span { display: table-cell; vertical-align: middle; background-color: #000000; }