垂直對齊問題裏面div

我想垂直對齊我的輸入和div內的標記元素。垂直對齊問題裏面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容器，而不是中間的頂部..有人能幫我一下嗎？謝謝。

來源

2013-11-22 FlyingCat

當你想玩vertical-align時，你需要知道像圖片這樣的東西有默認的vertical-align值設置。這意味着，即使您將其設置爲您的父容器的middle，但默認情況下，它將在圖像上設置爲text-bottom。

您需要強制它內部的所有元素，你要採取同樣的方式：

http://jsfiddle.net/H9XBA/

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

...，它會垂直對齊:)

來源

2013-11-22 01:00:54 Ming

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

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

來源

2013-11-22 01:02:37

這應該做的伎倆。

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.

來源

2013-11-22 01:26:12 Oriol

我需要有標誌圖像左對齊。這幾乎可以做到這一點。 +1雖然。 – FlyingCat

NP。更新了答案和示例鏈接。希望這是你正在尋找的。 – Oriol

一般來說，對於標識的，我喜歡它們包裹在一個DIV，然後加上一個ID給DIV。

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

display: table

父格...爲此，你要對齊中間的孩子你放：

display: table-cell; 
vertically-align: middle

你可以看看這裏的例子：

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

來源

2013-11-22 01:41:11

垂直對齊問題裏面div

回答

相關問題