Вертикально центрированные элементы в панелях инструментов html/css

Question

У меня есть две панели кнопок - каждая содержит ссылки, но одна также содержит кнопку отправки определенной высоты. В элементе с кнопкой отправки все элементы расположены по центру. Я хочу, чтобы другая панель кнопок, без кнопки отправки, выглядела одинаково, поэтому я дал ей явную высоту. Тем не менее, ссылки внутри него выравниваются сверху, а не посередине.

Что здесь происходит, и как я могу сделать панели ссылок одинаковой высоты с вертикально центрированными элементами?

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;
}

Смотрите jsFiddle для примера

Answer 1

Просто добавь line-height равный height, По умолчанию любой текст в этой строке будет центрирован по вертикали. Исключение возникает, если вы переносите текст на новую строку.

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

Я также удалил ваш vertical-align так как это лишнее содержания в элементах уровня блока. Это относится только к встроенным элементам.

.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/

Answer 2

Добавьте это к вашему CSS

.link-bar a {line-height: 40px; }

http://jsfiddle.net/xYVRj/

Answer 3

Использовать line-height имущество.

.link-bar a {
    line-height: 40px;
}

http://jsfiddle.net/SLqbk/7/

Answer 4

Я дал @Sparky672 ответ, потому что он правильно ответил на мой конкретный вопрос и привел меня на правильный путь, но я хочу поделиться тем, что я в итоге сделал, что я считаю более эффективным в целом:

Вместо того, чтобы явно установить высоту строки .link-bar a чтобы попытаться соответствовать высоте контейнера и кнопок, я просто установил ВСЕ элементы на панели инструментов на одинаковую высоту строки и сделал их display:inline-bock, В то время как применяются обычные предостережения относительно использования встроенного блока (см. Здесь и здесь), конечный результат - это согласование размеров и вертикальное центрирование для всех элементов, которые вы бросаете на своей панели инструментов, с меньшим количеством CSS для управления:

.link-bar * {
    line-height: 30px; 
    display:inline-block;
    /* Keep top-bottom padding of elements zeroed for consistent heights: */
    padding-top:0; padding-bottom:0; 
}

Смотрите обновленную скрипку.