jsFiddle

Question

我只想垂直对齐标题中的元素。这对桌子来说真的很容易，但无法用CSS来解决这个问题。我想用黑条垂直对齐所有3个元素：“Logo”，“Rechercher”和文本输入。

这是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>

Answer 1

这是一个工作正常的解决方案：您可以将line-height:size_px添加到您希望其子项垂直对齐的每个元素。（例如size_px：= 10px）。 line-height应与父高（height）相同。

尝试：

jsfiddle.net/rjCBR /

Answer 2

使用以下代码替换css的body和#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;
}

Answer 3

正如其他人所建议的那样，使用Vertical-align: middle;对齐每个元素的文本底部，对于输入框来说这看起来很奇怪，其中实际元素的底部将大大低于文本。

尝试将以下属性添加到输入css

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

使用CSS垂直对齐元素

3 个答案:

jsFiddle