web-dev-qa-db-ja.com

CSSセンターディスプレイインラインブロック？

ここに実用的なコードがあります。 http://jsfiddle.net/WVm5d/ （整列の中心を見るには結果ウィンドウをもっと大きくする必要があるかもしれません）効果）

質問

コードは問題なく動作しますが、私はdisplay: table;を使用するのは好きではありません。ラップクラスを中央揃えにすることができる唯一の方法です。 display: block;やdisplay: inline-block;を使う方法があればもっと良いと思います。別の方法で整列中心を解決することは可能ですか？

コンテナにfixedを追加することは私にとって選択肢ではありません。

もしJS Fiddleリンクが将来壊れたら私もここにコードを貼り付けます：

body {
    background: #bbb;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: table;
    overflow: hidden;
}

.sidebar {
    width: 200px;
    float: left;
    background: #eee;
}

.container {
    margin: 0 auto;
    background: #ddd;
    display: block;
    float: left;
    padding: 5px;
}

.box {
    background: #eee;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 5px;
    float: left;
}

.box:nth-child(3n+1) {
    clear: left;
}
<div class="wrap">
    <div class="sidebar">
        Sidebar
    </div>
    <div class="container">
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
    </div>
    <div class="sidebar">
        Sidebar
    </div>
</div>
csscss3
181
Jens Törnell

display: inline-blockを持つ子要素が100％幅の親の中で水平方向と垂直方向の両方に配置される必要があるので、受け入れられた解決策は私にはうまくいきません。

私はFlexboxのjustify-contentとalign-itemsプロパティを使いました。これらはそれぞれ要素を水平方向と垂直方向にセンタリングすることを可能にします。親で両方をcenterに設定することによって、子要素（あるいは複数の要素さえ）は完全に真ん中になります。

このソリューションは固定幅を必要としません。ボタンのテキストが変わるため、これは不適切でした。

これはCodePenデモ と以下の関連コードの抜粋です。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  display: inline-block;
}
<div class="parent">
  <a class="child" href="#0">Button</a>
</div>
43
EdA

これを試して。 bodyにtext-align: centerを、wrapにdisplay:inline-blockを追加してから、display: tableを削除しました。

body {
    background: #bbb;
    text-align: center;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}
250
Bazzz

<div>とtext-align:center;がある場合、その中のテキストはすべて、そのコンテナ要素の幅を基準にして中央に配置されます。 inline-block要素はこの目的のためのテキストとして扱われるので、それらも中央に配置されます。

67
Spudley

あなたはまた、ポジショニングでこれをすることができます、親divを相対にそして子divを絶対に設定します。

.wrapper {
      position: relative;
  }
.childDiv {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
  }
7
vijayscode

"display：table"を使う必要はありません。あなたのマージン：0オートセンタリングの試みがうまくいかない理由はあなたが幅を指定しなかったからです。

これはうまく動作します：

.wrap {
    background: #aaa;
    margin: 0 auto;
    width: some width in pixels since it's the container;
}

そのdivはデフォルトでブロックされるので、display：blockを指定する必要はありません。あなたはおそらくオーバーフローをなくすこともできます：隠されています。

0
user2166297

2つのパラメータを変更しました。

.wrap {
    display: block;
    width:661px;
}

ライブデモ

0
Myles Gray