CSS要素を中央に配置できません

CSSを使用して私の人生の中で自分のサイトをセンタリングすることはできません。CSS要素を中央に配置できません

<div id="container> 
<!-- Centered Content Goes here--> 
</div>

を使用して次に

body { 
    text-align: center; 
} 
#container { 
    width: 770px; 
    margin: 0 auto; 
    text-align: left; 
}

しかし、それだけで文句を言わないセンターに行く：私は、以下を含むウェブを中心に提案し、すべての通常の方法を試してみました。それはページの左側にとどまります。

私はセンタリングしたい要素のCSSの例はこれです：私は前に述べたように

<div id="container> 
<div id="topHeader></div> 
<!-- All other elements go here as well--> 
</div>

しかし、：だから

#topHeader 
{ 
    background:url(images/top_header.jpg); 
    position:absolute; 
    width: 695px; 
    height: 242px; 
    top: 0px; 
    left: 0px; 
}

、私のHTMLは次のようになります。要素はそのまま残ります。ありがとう！ Eric

出典

2009-08-28 Eric

主な問題は、#topHeader要素の絶対配置です。 top: 0px; left: 0px;と絶対配置されているため、ページの左上に配置されます。

#topHeader要素から絶対位置を削除して開始してください。

出典

2009-08-28 14:51:52

-2

私が知る限り、それは単に機能しません。 text-alignは、要素をブロックするのではなく、テキストまたはインラインコンテンツを中央に配置します。

編集：一方、崩壊剤のリンクは意味があります。残念ながら、固定サイズのブロックのみです。

出典

2009-08-28 14:44:56

Crimson、ブロック要素の幅を事前に知らなくても、中央に配置することはできません。 –

ヘッダーは、親要素ではなく収容ブロック（つまり本文）からオフセットされるように配置しています。あなたが望むのは、相対的なポジショニングです。

絶対

ボックスの位置（及びおそらくサイズ） '上部'、 '右'、 '底部'、及び '左' プロパティで指定されています。これらのプロパティは、ブロックを含むボックスに対して、のオフセットを指定します。絶対の位置付けされたボックスは、通常のフローから取り出されます。つまり、後での兄弟のレイアウトに影響するものはではありません。また、絶対にに配置されたボックスにはマージンがありますが、は他のマージンと一緒に折りたたまれません。

- 9.3.1 Choosing a positioning scheme: 'position' property

絶対：

<html> 
    <head> 
     <style type="text/css"> 
      body { 
       text-align: center; 
      } 
      #container { 
       color:blue; 
       border:1px solid blue; 

       width: 770px; 
       margin: 0 auto; 
       text-align: left; 
      } 
      #topHeader 
      { 
       color:red; 
       border:1px solid red; 

       position:absolute; 
       width: 695px; 
       height: 242px; 
       top: 0px; 
       left: 0px; 
      }  
     </style> 
    </head> 
    <body> 
     outside 
     <div id="container"> 
      inside 
      <div id="topHeader">deep inside</div> 
      <!-- All other elements go here as well--> 
     </div> 
    </body> 
</html>

相対：

<html> 
    <head> 
     <style type="text/css"> 
      body { 
       text-align: center; 
      } 
      #container { 
       color:blue; 
       border:1px solid blue; 

       width: 770px; 
       margin: 0 auto; 
       text-align: left; 
      } 
      #topHeader 
      { 
       color:red; 
       border:1px solid red; 

       position:relative; 
       width: 695px; 
       height: 242px; 
       top: 0px; 
       left: 0px; 
      }  
     </style> 
    </head> 
    <body> 
     outside 
     <div id="container"> 
      inside 
      <div id="topHeader">deep inside</div> 
      <!-- All other elements go here as well--> 
     </div> 
    </body> 
</html>

出典

2009-08-28 14:45:33 MyItchyChin

ヨーヨーの先頭にこれを追加してみてください。この dead centre

出典

2009-08-28 14:45:44

+1、私は考えが好きだった。 –

素晴らしい例です。私のCSSテクニックのチートリストに追加しました。 –

+1素晴らしいリソースです。 –

で試してみてくださいur cssファイル：

// Wipes out any preexisting padding and margin. 
html, body { 
    padding: 0; 
    margin: 0; 
}

次に、位置を追加します。あなたが中心にしたいクラスへの指示。実際には、すべてのクラスが相対位置を使用するように、html、bodyに追加してみてください。あなたはポジションを持っている可能性があります：絶対;次に左に結合します：0px;あなたのヘッダーがマージンを無視するように強制する：0 auto;ページの左にとどまります。

出典

2009-08-28 14:47:34

これらのすべてのセンタリング方法を試すときにチェックするべき点は、使用しているメソッドに対してdoctypeが正しいことを確認することです。

ご希望の場合は、こちらをご覧ください。

出典

2009-08-28 15:13:47 Chris

CSS要素を中央に配置できません

答えて

関連する問題