1
私は現在プロジェクトに取り組んでおり、コンテンツエリアを中心にすることはできません。これは、主な#content divが私のブラウザで検査されたときに高さを持たないためだと思います。 #contentでCSSの高さを割り当てますが、このdivは割り当てられた属性を保持していないようです。ここでDivは高さ属性または中心を保持しません
が#content divのが含まれているHTMLの抜粋です：
<div id="content">
<div id="mainbox">
<h1>title</h1>
<h3>title</h3>
<p>text</p>
<ul>
<li>Vivamus vestibulum nulla nec ante.</li>
<li>Praesent placerat risus quis eros.</li>
</ul>
</div>
<div id="relatedbox">
<h1>Related</h1>
<p>text</p>
</div>
</div>
その後凝縮CSSのコードは次のとおりです。
#content {
height: 500px;
width: 825px;
margin-left: auto;
margin-right: auto;
}
#content #relatedbox {
width: 200px;
font-size: 10pt;
background-color: white;
margin: 1em 0.5em 1em;
border: 3px solid #00824c;
float: left;
}
私は「位置を含むかなりの数のことを試してみました：多くの他の同様の問題の解決策のように見える "相対的な"（そして絶対的な）しかし、私を修正しないでください。ボックスは右にレンダリングされますが、divの左側に貼り付けられます。
ご協力いただきありがとうございます。
EDIT（解答）：解決策が見つかったようですが、それがベストであるかどうかはわかりません。私のHTMLでは、文字通り、スタイリングをdiv自体に追加して、それを取り上げました。 #content divですべてのCSSコードをクリアすることができますが、他のいくつかの依存関係のため#content idを保持する必要があります。すべての人に助けてくれてありがとう！それを修正したコード： <div id="content" style="height: 500px; width: 850px; position: relative; margin-left: auto; margin-right: auto;">
あなたのコードはそのまま動作するので、もっとhtmlを見る必要があるかもしれません。ここでは、現在のコードのJSFiddleがコンテンツ要素の幅だけ減少しているので、中央になることがわかります。 http://jsfiddle.net/d2cnR/1/ –
@MattMombrea応答に感謝します。私のヘッダーのdivには、いくつかの絶対的なタグを使用してアイコンを正しい場所に置いていますが、それ以外の問題は考えられません。 – wchristiansen
それは働いているようです。おそらくあなたのページのCSSスタイルを後で上書きしたでしょう。 –