display：divの中心に位置するテーブルセルfoobars？

以下のコードを使用してhtmlページを作成すると、青いヘッダdivが左揃えになります。これは、ヘッダー要素の幅が固定され、左右の余白がautoに設定されているにもかかわらずです。display：divの中心に位置するテーブルセルfoobars？

表を正しく中央に置くことができる唯一の方法は、表のセルプロパティを削除することです。

私はそれを中央揃え（水平）にする必要があります。また、子要素を垂直方向の中央揃えにする必要があります（垂直揃えと表示指示句を使用）。

divを中央揃えにし、垂直に揃えるにはどうすればよいですか？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> 
<head> 
<style type="text/css"> 
body {margin:0; padding:0; text-align:center;} 
.wrapper {padding-top:59px; text-align:left;} 
.header {height:138px;width:917px; background:blue;margin:0 auto; text-align:center; vertical-align: middle; display:table-cell; } 
</style> 
</head> 
<body> 
<div class="wrapper"> 
    <div class="header"> 
     <div class="siteTitle"><a href="#">Site Title Here</a></div> 
     <div class="tagline">Tagline goes here</div> 
    </div> 
</div> 
</body>

出典

2010-12-02 Scott B

のいずれかの縦と横のセンタリングのテクニックを使用するようにスタイルを変更しました。私はこれが私にとって最も理にかなっているので、これを好む。ファンキーなハッキングはなく、複数のブラウザで動作します。

.wrapper 
{ 
    position: absolute; 
    top: 50%; 
    margin-top: -69px; /* half main elements height*/ 
    left: 0; 
    width: 100%; 
} 

.header 
{ 
    width: 917px; 
    height: 138px; 
    margin: 0 auto; 
    background-color: #cccccc; 
    overflow: auto; /* allow content to scroll inside element */ 
    text-align: center; 
}

出典

2010-12-03 04:14:57

縦に並べる必要があるコンテンツの高さがわからない場合はどうなりますか？ –

@JonathonHillそれは元の質問と実際には関係ありませんが、Chris Coyierはここでそれについての記事を書いています。 http://css-tricks.com/centering-in-the-unknown/ –

だけで、必要に応じて先頭にパディングを追加し、高さからその値を減算display:table-cell;

をドロップします。以下のような何か：

.header { 
    height:88px; 
    padding:50px 0 0 0; 
    width:917px; 
    background:blue; 
    margin:0 auto; 
    text-align:center; 
}

あなたは、あなたの好みにパディング/高さの比率を調整する必要があります。

出典

2010-12-02 23:08:33 Stephen

display：divの中心に位置するテーブルセルfoobars？

答えて

関連する問題