我只想垂直對齊我的標題中的元素。這對於表格來說確實很簡單，但不能指出如何使用CSS來完成。我想通過黑條垂直對齊所有3個元素：「徽標」，「搜索器」和文本輸入。使用CSS垂直對齊元素

這裏是CSS：

body { 
margin:0; 
padding:0; 
font-size:100%; 
} 

#header { 
background-color:#303030; 
height:3em; 
} 

#logo { 
color:#EEEEEE; 
font-size:2em; 
line-height:1.5em; 
padding:0 30px 0px 10px; 
display:inline; 
} 

#recherche { 
color:#EEEEEE; 
font-size:1.5em; 
display:inline; 
} 

#recherche input { 
width:300px; 
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius:4px; 
}

和HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Test</title> 
    <link rel="stylesheet" type="text/css" href="css/mainframe.css"> 
</head> 
<body> 
    <div id="header"> 
    <div id="logo">Logo</div> 
    <form id="recherche" action="/" autocomplete="off"> 
    <label for="rechercher">Rechercher</label> 
    <input type="text" name="recherche"> 
</form> 
    </div> 
</body> 
</html>

來源

2013-07-02 user2542737

這是一種形式，而不是一個標籤。 – user2542737

這裏要說的是正常工作的解決方案：你可以添加line-height:size_px每一個元素，你想它的孩子是垂直對齊。（例如size_px：= 10px）。 line-height應該與父母身高相同（height）。

嘗試：

jsfiddle.net/rjCBR/

來源

2013-07-02 13:32:16 vlio20

如果可能包含元素，這是一個糟糕的解決方案。 – cimmanon

更換body與下面的代碼你的CSS的#header：

body { 
margin:0; 
padding:0; 
font-size:100%; 
width: 100%; 
display: table; 
} 

#header { 
background-color:#303030; 
height:3em; 
display: table-cell; 
vertical-align: middle; 
}

來源

2013-07-02 13:36:51

使用Vertical-align: middle;，因爲其他建議，對齊底部每個元素的文本，這對於實際元素的底部基本上低於文本的輸入框來說看起來很奇怪。

嘗試添加下列屬性輸入CSS

height: 24px; 
vertical-align: text-bottom;

jsFiddle

來源

2013-07-02 13:47:56 KyleMit

謝謝你，這個工作。 – user2542737

請記住，爲了獲得最佳答案並將其標記爲已接受最佳答案，不僅僅是在這裏，而是在將來的討論中，以促進最好的內容。 – KyleMit

使用CSS垂直對齊元素

回答

jsFiddle

相關問題