2011-12-22 55 views
0

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>

+2

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

+1

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

+0

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

答えて

3

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

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

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

margin: 0 auto; 
+0

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

+0

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

+3

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

2

のdiv利用センターへ:

#content{ 
    margin: 0 auto; 
} 

<div id="content">This will be centered horizontally</div> 
2
<div style="margin:auto; width: 100px;">lorem</div> 
2

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

(例:http://jsfiddle.net/7dhwG/

+0

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

+0

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

+0

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

2

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

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

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

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

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

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

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

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

0

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

関連する問題