html - divを水平方向にのみ中央揃えする方法は?

Question

divを水平方向にのみ中央に配置する最良の方法は何だろうか. 私は非常に多くの例を見てきましたが、それらは水平方向と垂直方向の両方に焦点を当てていました。

だから私はこれを持っているとしましょう：

<body>
<div id="layout">
    Content of my site here.
</div>
</body>

score 1 · Accepted Answer

垂直：

垂直の場合、次のようなものを使用する必要があります。

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

そして、これを使用してください：

ul {
list-style: none;
margin: 0;
padding: 0;
}

これにより、パディングのマージンとリストスタイルが削除されます。そして、垂直リストが表示されます。今すぐ好きな場所に配置してください。

水平:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

このために、CSS にはもう 1 行だけあります。

ul li {
display: inline; // this is used to place elements in one line..
}

他は同じになります！

これですべてです！これで、このリストを div に配置できます。そしてそれはうまくいくでしょう！

それを配置するには、親divposition: absoluteに使用する必要があるこれに使用できます。または、またはposition: relativeを使用できます。必要なのはそれだけです。padding:margin

score 0 · Accepted Answer

#layout {
    margin: 0 auto;
    position: relative;
}

これは、ウィンドウに対して水平方向に中央#layoutに配置されます。親がある場合は、その親です。

score 0 · Accepted Answer

0

縦中央になります

  #layout{position:absolute;top:50%;margin-top:-heightofDiv/2;}

于 2013-09-10T17:54:42.183 に答える

score 0 · Accepted Answer

最も適切な方法は、次のいずれかを使用することです

margin-top:
margin-bottom:

padding-top:
padding-bottom:

マージンとパディングのどちらを選択するかは、レイアウトによって異なります。コードでは、適用されるマージンを選択できます

 <div id="layout">

または、コンテナのパディングを設定できます

 <div id="layout">

(この場合は本体)。

4 に答える 4