Элементы с вертикальной ориентацией в панелях инструментов 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, как это излишнее содержание в элементах уровня блока. 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/

Answer 2

line-height Используйте свойство.

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

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

Answer 3

Добавьте это в CSS

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

http://jsfiddle.net/xYVRj/

Answer 4

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

Вместо того, чтобы явно задавать высоту строки .link-bar a, чтобы попытаться соответствовать высоте контейнера и кнопок, я просто устанавливаю ВСЕ элементы на панели инструментов на одну и ту же высоту строки и делаю их display:inline-bock. В то время как нормальные предостережения использования встроенного блок применяется (см here и here), конечный результат согласуется проклейки и вертикальное центрирование для всех элементов, которые вы бросить в вашей панели инструментов, с меньшим количеством 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; 
} 

Посмотреть updated fiddle.