私のdivを中心にするCSSの方法

私はWebページの上部にあるdivを持っていますが、divは水平に中心を合わせたものです。私のdivを中心にするCSSの方法

何らかの理由でdivが常に左側に座っていますか？

divをどのように水平にセンタリングすることができるのか分かりますか？

私はdiv要素の中央「」「=を合わせ」を追加した場合、そのが中心に座っているが、私はそれを中心にする純粋なCSSの方法を探しています：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title> </title> 

    <style type="text/css"> 
    <!-- 
     body { 
      text-align: center; 
      margin: 0 auto; 
      background-color: RGB(197, 155, 109); 
      background-image: url("../images/bodyBk2Lite.png"); 
      background-repeat: repeat; 
      font-family: "Arial", "Tahoma", Serif; 
      font-size: 17px; 
     } 

     p { 
      text-align: left; 
     } 

     #heading { 
      width: 100%; 
      height: 110px; 
      background-image: url("../images/headingBk2Lite.png"); 
      background-repeat: repeat-y; 
      background-color: RGB(0, 0, 0); 
     } 

     #headingContainer { 
      width: 980px; 
      height: 110px; 
      text-align: right; 
      background-color: red; 
     } 

     #headingSpacer { 
      height: 15px; 
     } 
    --> 
    </style> 
</head> 
<body> 

    <div id="heading"> 
     <div id="headingContainer"> 
      <a href="index.html"><img src="images/headingImg.png" height="105px" alt="Select Recipes"/></a> 
     </div> 
    </div> 

</body> 
</html>

出典

2011-10-28 Jake M

あなたは、自動マージンを使用することができます要素には幅があります。

#headingContainer { 
    margin: 0 auto; 
    width: 980px; 
    height: 110px; 
    text-align: right; 
    background-color: red; 
}

http://jsfiddle.net/Xee6s/

出典

2011-10-28 01:07:05 Clive

これは合理的です。しかし、純度は本当に必要ありません。あなたは思いませんか？ – mozillanerd

うんマージン：0自動;良いですが、あなたはテキストの整列を離れる必要があります：IEのような古いブラウザのためのあなたの体の中心

出典

2011-10-28 01:11:21 GregM

IE6またはIE6より古いバージョンと、quirksモードで新しいバージョンのみ。 *誰も* 6歳以上のIEについては気にしませんし、誰も奇妙なモードを使用するべきではありません。 – thirtydot

左に余白を設定することによってdivsを中央に揃えることができます。&これは、スペースを分割するために、ブラウザを作る均等jsfiddleで

#heading 
{ 
    width:200px; 
    margin:0 auto 0 auto; 
}

：http://jsfiddle.net/DfXBp/1/

出典

2011-10-28 01:12:15

は、あなたは、単に自分のスタイルに追加し、中央に#headingまたは#headingContainer divを合わせしようとしていると仮定すると：

margin: 0 auto;

出典

2011-10-28 01:13:31

私のdivを中心にするCSSの方法

答えて

関連する問題