Question

I have two button bars- each contains links, but one also contains a submit button of a certain height. The one with the submit button has all the elements vertically centered. I want the other button bar, without the submit button, to look the same, so I gave it an explicit height. However, the links within it align to the top instead of in the middle.

What’s going on here, and how can I make link bars that are of a consistent height, with vertically centered elements?

HTML:

<div class="link-bar">
    <input type="submit" value="Save"/>
    <a href="#">link</a>
    <a href="#">link</a>
</div>

<div class="link-bar">
    <a href="#">link</a>
    <a href="#">link</a>
</div>

CSS:

input[type='submit'] {
    width:100px;
    height:40px;
    border:solid red 1px;
}
.link-bar {
    height:40px;
    background:#EEE;
    border:blue 1px solid;
    margin:10px;
    vertical-align: middle;
}

See jsFiddle for example

Answer 1

Simply add line-height equal to the height. By default, any text on that line will be vertically centered. The exception occurs if you wrap the text to a new line.

http://www.w3.org/wiki/CSS/Properties/line-height

I also removed your vertical-align as it’s superfluous to content in block level elements. It only applies to inline elements.

.link-bar {
    height: 40px;
    background: #EEE;
    border:blue 1px solid;
    margin: 10px;
}

.link-bar a {
    line-height: 40px; /* equal to the height of the container */
}

DEMO:

http://jsfiddle.net/SLqbk/9/