Проблема с вертикальным выравниванием внутри div

Question

Я пытаюсь вертикально выравнивать середину для ввода и элемент тега внутри div.

У меня есть

<div id='title-container'> 
     <img id='logo' src='images/topLogo.png'> 
     <div id='search'><input type='text'><a id='btn' href='#'>test button</a></div> 
</div> 

я хочу показать что-то вроде

-------------------------------------------------------------------- 
| ---------------------------        
| |  topologic.png  |  my input box test button       
| ---------------------------       
|____________________________________________________________________ 

CSS

#title-container{ 
    height: 80px; 
    vertical-align: middle; 
    background-color: yellow; 
} 

#search{ 
    display: inline-block; 
    vertical-align: middle; 
} 

Я хочу вертикального выравнивания мой input box и test button внутри моего title-container DIV и всплывают эти два пункта справа.

Я попытался добавить

#search{ 
    display: inline-block; 
    vertical-align: middle; 
    float:right; 
} 

но те, элемент будет в верхней части титульного контейнера DIV вместо середины .. Может кто-нибудь помочь мне об этом? Благодарю.

Answer 1

Если вы хотите играть с vertical-align, вам необходимо знать, что у таких вещей, как изображения, установлены значения по умолчанию vertical-align. Это означает, что, хотя вы установили его для middle для своего родительского контейнера, он по умолчанию устанавливается как text-bottom.

Вам нужно, чтобы заставить его для всех элементов внутри, что вы хотите, чтобы действовать таким же образом:

http://jsfiddle.net/H9XBA/

#title-container img#logo, 
#title-container #search { vertical-align: middle; } 

... и это будет вертикально выравнивать :)

Answer 2

свойство vertical-align в CSS не делает то, что вы ожидаете. Как правило, встроенные элементы могут быть выровнены по вертикали в их контексте с помощью вертикального выравнивания: посередине. Но контекст - это высота строки текста, в которой они находятся, а не родителя.

http://phrogz.net/CSS/vertical-align/index.html См

Answer 3

Это должно сделать трюк.

HTML:

<div id='title-container'> 
    <div id='logo'><img src='http://placehold.it/60x40' /></div> 
    <div id='search'> 
     <input type='text' /> 
     <a id='btn' href='#'>test button</a> 
    </div> 
</div> 

CSS:

#title-container{ 
    height: 80px; 
} 

#logo, #search { 
    display: inline-block; 
    height: 100%; 
    position: relative; 
    line-height: 80px; 
    float: right; 
} 

#logo { 
    float: left; 
} 

#logo img { 
    vertical-align: middle;  
} 

See the example.

Answer 4

Как правило, для логотипов, мне нравится оборачивать их в DIV и затем добавить идентификатор к этой DIV.

Другим способом вы можете вертикально выравнивать их к середине является использование

display: table 

для родительского DIV ...и для детей, которые вы хотите выровнять середину вы положили:

display: table-cell; 
vertically-align: middle 

Вы можете проверить пример здесь:

http://jsfiddle.net/combizs/QGg6P/