Question

I have 5 <a> tags with a class that puts a box with border around the word. I had to make the boxes very big and the text centers horizontally with text-align: center but not vertically.

I tried vertical-align to no success. How can I target the text to move into the middle of the box?

HTML

<a href="#" id="someid1" class="someclass">Small</a>
<a href="#" id="someid2" class="someclass">Medium</a>
<a href="#" id="someid3" class="someclass">Large</a>

etc etc

CSS

#container a.someclass { border:1px #ACACAC solid;text-align:center; }

Answer 1

The line-height parameter rocks (if your menu items don’t go multiline) – DEMO

a.someclass {
    border: 1px #ACACAC solid;
    display: inline-block;
    text-align: center;
    height: 60px;
    line-height: 60px; /* the same as the height */
    width: 150px;
}