Question

I Have been fiddling with this for hours. I can not get my text to align vertically within the 25px a element. The text always wants to sit at the every top of the coloured ‘box’. I just want it in the vertical middle. Additionally this problem is being inherited throughout all of my list.

#nav ul li.cat:nth-child(1) > a {
    background-color: #647484;
}

#nav ul li a {
    color: #FFFF00;
    display: block;
    font-size: 1em;
    height: 25px;
    padding-left: 30px;
    text-decoration: none;
    width: 137px;
}

HTML

<div id="nav">
<ul>
<li class="cat">
<a href="http://localhost/country/index.php/welcome/cat/19">Beef</a>
<ul>
<li class="subcat">
<a href="http://localhost/country/index.php/welcome/cat/21">Ribs</a>
</li>
</ul>
<ul>
<li class="subcat">
<a href="http://localhost/country/index.php/welcome/cat/30">Steaks </a>
</li>
</ul>
</li>
<li class="cat">
<a href="http://localhost/country/index.php/welcome/cat/19">Beef</a>
<ul>
<li class="subcat">
<a href="http://localhost/country/index.php/welcome/cat/21">Ribs</a>
</li>
</ul>
<ul>
<li class="subcat">
<a href="http://localhost/country/index.php/welcome/cat/30">Steaks </a>
</li>
</ul>
</li> <!-- etc etc -->
</ul>
</div>

Answer 1

Your line-height is less than the height of your box, so it looks like it aligns to the top when it’s actually just taking up the space it should. Try setting line-height: 25px along with your height.

See the jsFiddle.