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

我想垂直對齊我的title-container div中的input box和test button並將這兩個項目向右浮動。

我試過添加

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

但是這些元素將位於標題容器div而不是中間..有人可以幫助我嗎？ 謝謝。

Answer 1

CSS中的vertical-align屬性不能滿足您的期望。 通常，內聯元素可以通過vertical-align：middle在其上下文中垂直對齊。 但是上下文是他們所在的文本行的高度，而不是父文本。

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

Answer 2

這應該可以解決問題。

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

查看示例。

Answer 3

當您想要使用vertical-align ，您需要注意像圖像之類的東西設置了默認的vertical-align值。 這意味着，即使您將其設置為父容器的middle ，默認情況下也會將其設置為圖像本身的text-bottom 。

你需要為你想要以同樣方式行事的所有元素強制它：

http://jsfiddle.net/H9XBA/

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

......它將垂直對齊:)

Answer 4

通常，對於徽標，我喜歡將它們包裝在DIV中，然后在該DIV中添加id。

另一種可以將它們垂直對齊到中間的方法是使用

display: table

對於父級div ...以及對於你想要對齊的孩子你放入：

display: table-cell;
vertically-align: middle

你可以在這里查看一個例子：

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