0

我只想垂直对齐标题中的元素。这对于表格来说真的很容易，但不知道如何用 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>
4

3 回答 3

0

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

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

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

jsFiddle

于 2013-07-02T13:47:56.057 回答
0

这是一个很好的解决方案：您可以添加line-height:size_px到您希望其子元素垂直对齐的每个元素。（例如 size_px := 10px）。line-height应该与父高度 ( )相同height。

尝试：

jsfiddle.net/rjCBR/

于 2013-07-02T13:32:16.790 回答
0

用以下代码替换你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-02T13:36:51.357 回答