DIVをCSSで中央に配置するにはどうすればいいですか？

divをCSSで中央に揃える方法を知りたいのですが。私はいくつかのものをgoogled &は、stackoverflowでチェックされたが、私のCSSコードと競合していた。DIVをCSSで中央に配置するにはどうすればいいですか？

ここに私のコード（念のため）です：

body, p, span, div { 
 
    font-family: 'Droid Sans', arial, serif; 
 
    font-size:12px; 
 
    line-height:18px; 
 
    color:#6d6d6d; } 
 
.countdown { 
 
    padding-top:15px; width: 100%; 
 
    height: 68px; 
 
    margin:0 auto 0 auto; 
 
    bottom:0; 
 
    position:absolute; 
 
} 
 
.countdown .countdown_section{ 
 
    background:url('images/backcountdown.png') no-repeat 1px top; 
 
    float:left; 
 
    height:100%; 
 
    width:54px; 
 
    margin:0 5px; 
 
    text-align:center; 
 
    line-height:6px; 
 
} 
 
.countdown .countdown_amount { 
 
    font-size:15px; 
 
    color:#ab7100; 
 
    text-shadow:0 0.8px #fedd98; 
 
    line-height:52px; 
 
    font-weight:bold; 
 
    text-align: left; 
 
} 
 
.countdown span { 
 
    font-size:8px; 
 
    color:#999999; 
 
    text-transform:uppercase; 
 
    line-height:26px; 
 
}

<body> 
 
<div class="countdown clearfix"> \t \t \t \t \t \t \t 
 
</div> 
 
</body>

出典

2011-12-22 Netizen110

何を見つけましたか？どのように矛盾している？あなたのCSSはあまりにも読みにくい痛みです。 – BoltClock

問題のHTMLを私たちに提供することができますが、divを中心に置くためのかなり一般的な方法がありますが、何を中心にしていますか？あなたは9の前にIEのバージョンをサポートしていますか？ – PseudoNinja

次回は、すべてのコードを水平ではなく垂直に書きます：P。 – Netizen110

次のCSSを使用して、特定の幅のdivをセンタリングすることができます

#yourDiv { 
    width: 400px; 
    margin: 0 auto; 
}

出典

2011-12-22 20:39:08 Yogu

自動的に次の水平要素を中心に：

margin: 0 auto;

出典

2011-12-22 20:38:46

私が中心にしたいのは、すでにマージンがある.countdownです：0 auto 0 auto。＆私はそれのようにしている場合は、粘着性のあるフッターを持っています。他に何かありますか？ – Netizen110

'.countdown'に' width：100％ 'を指定したので、divは全体の幅を使用しますので、どのように中心合わせする必要がありますか？または、テキストを中央に配置したいですか？ – Yogu

幅は親コンテナの幅より小さくなければなりません。 100％に設定すると、中央に配置することはできません。 –

のdiv利用センターへ：

を

#content{ 
    margin: 0 auto; 
} 

<div id="content">This will be centered horizontally</div>

出典

2011-12-22 20:38:48 Gabe

<div style="margin:auto; width: 100px;">lorem</div>

出典

2011-12-22 20:39:27 sunkencity

上記の答えは、相対的または静的な位置でのdivのために動作します。絶対配置要素のために（あなたの.countdown要素のように、あなたはXXXは（）パディングとボーダーを含むdiv要素の幅の半分を表しleft: 50%とmargin-left: -XXXpxを設定する必要があります

（例：http://jsfiddle.net/7dhwG/）

出典

2011-12-22 20:42:06 Aaron

これは試しましたが、水平スクロールバーを持っていました。まだnp、ありがとうございました！ – Netizen110

ピクセル単位で明示的な幅を指定する必要があります。 .countdown'を親の幅の100％未満にする – Aaron

ありがとう！あなたがロック！あなたは私の一日を作った：D。 – Netizen110

この意志センターあなたのページに、それは素晴らしい作品。

#yourdiv { 
    width: width you want px; 
    margin: 0 auto; 
    }

出典

2011-12-22 20:50:51

あなたはまた、50％に左とPXにおける全幅の-halfへのmargin-left設定することで、絶対位置のdivを中央にすることができます。

div { 
position: absolute; 
width: 500px; 
left: 50%; 
margin-left: -251px; 
}

出典

2012-08-09 05:06:48

設けられた固定幅を設定し、あなたが適切なDOCTYPEを入れて、

この操作を行います：0オート、クロスブラウザの方法：

Margin-left: auto; 
Margin-right: auto;

希望は、このマージンを使用して

出典

2012-09-29 20:34:27

停止を支援これを行うにはHere私はそれをテストし、それはすべてのブラウザで完全に動作します

出典

2017-04-20 02:42:41

DIVをCSSで中央に配置するにはどうすればいいですか？

答えて

関連する問題