0

ヘッダーの要素を垂直方向に揃えたいだけです。これは、テーブルでは非常に簡単ですが、CSS でそれを行う方法がわかりません。「Logo」、「Rechercher」、およびテキスト入力の3つの要素すべてを黒いバーに垂直に揃えたいと思います。

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

ここに問題なく機能する解決策がありますline-height:size_px。子を垂直に配置する各要素に追加できます。(例: size_px := 10px)。は親のline-height高さと同じである必要があります ( height)。

試す：

jsfiddle.net/rjCBR/

于 2013-07-02T13:32:16.790 に答える
0

bodyCSS のとを次のコードに置き換え#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 に答える
0

を使用するVertical-align: middle;と、他の人が示唆しているように、各要素のテキストの下部が整列します。これは、実際の要素の下部がテキストのかなり下になる入力ボックスでは奇妙に見えます。

次のプロパティを入力 css に追加してみてください

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

jsフィドル

于 2013-07-02T13:47:56.057 に答える