divを水平に配置するにはどうすればよいですか？

何らかの理由で、私のdivが包含divの水平方向の中央に配置されません。

.row {
  width: 100%;
  margin: 0 auto;
}
.block {
  width: 100px;
  float: left;
}

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

また、1つのブロックdivのみが含まれる行divが存在する場合もあります。何が悪いのですか？

あなたがやろうとしていることを達成するには：

のdisplay: inline-block代わりに使用することを検討してくださいfloat。

これを試して：

.row {
  width: 100%;
  text-align: center; // center the content of the container
}

.block {
  width: 100px;
  display: inline-block; // display inline with ability to provide width/height
}​

デモ

• 要素はスペース全体を占めるため、margin: 0 auto;一緒に持つことwidth: 100%は役に立たない。

• float: left要素が左にフロートし、スペースがなくなるまで、新しい行に移動します。display: inline-block要素をインラインで表示できるようにするために使用しますが、サイズを提供する機能があります（display: inline幅/高さが無視される場所ではありません）。

CSSの調整は悪夢でした。幸いにも、新しい標準が2009年にW3Cによって導入されました：フレキシブルボックス。ここにはそれについての良いチュートリアルがあります。個人的には、他の方法よりもはるかに論理的で理解しやすいと思います。

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.block {
  width: 100px;
}

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

FlexBoxの使用：

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

.row {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center; /* for centering 3 blocks in the center */
  /* justify-content: space-between; for space in between */ 
}
.block {
  width: 100px;
}

最新の傾向は、Floatを使用する代わりにFlexまたはCSSグリッドを使用することです。ただし、一部の1％ブラウザーはFlexをサポートしていません。しかし、とにかく古いIEユーザーを本当に気にしている人は誰でしょう;）

フィドル：ここをチェック

別の実施例使用して、display: inline-blockとtext-align: center

HTML：

<div class='container'>
    <div class='row'>
        <div class='btn'>Hello</div>
        <div class='btn'>World</div>
    </div>
    <div class='clear'></div>
</div>

CSS：

.container {
    ...
}
.row {
    text-align: center;
}
.btn {
    display: inline-block;
    margin-right: 6px;
    background-color: #EEE;
}
.clear {
    clear: both;
}

フィドル：http : //jsfiddle.net/fNvgS/

この質問はカバーしていませんが（<div>コンテナー内でs を配置するため）、直接関連しています。1つのdivだけを水平方向に配置したい場合は、次のようにすることができます。

#MyDIV
{
    display: table;
    margin: 0 auto;
}

要素を1行で表示し、IE 6/7が問題にならない場合はdisplay: table、のdisplay: table-cell代わりにおよびを使用することを検討してくださいfloat。

inline-block要素間の水平方向のギャップにつながり、そのギャップをゼロにする必要があります。最も簡単な方法はfont-size: 0、親要素に設定してから、またはに設定するfont-sizeことdisplay: inline-blockにより、を持つ子要素に復元することです。font-sizepxrem

私は受け入れられた答えを試しましたが、最終的にそれを発見しました：

margin: 0 auto;
width: anything less than 100%;

これまでのところうまくいきます。

水平方向のdiv配置を処理する必要がある場合は、この2つの方法を使用しました。
まず（marginプロパティを使用して中央揃え）：

.center-horizontal-align {
    margin-left: auto;
    margin-right: auto;
    width: (less than 100%) or in px
}

左マージンと右マージンをautoに設定すると、使用可能なマージンを均等に分割するように指定されます。幅が100％の場合、中央揃えは効果がありません。

そして2番目：

.center-horizontal-align {
    display: table
    margin-left: auto;
    margin-right: auto;
}

2つ目の方法は、複数の要素があり、それらすべてを1つのテーブルセル（つまり、1つのセルに複数のボタン）の中央に配置する場合に便利です。