BinaryDevelop
  1. ホーム
  2. css

[解決済み】CSS center display inline block?

2022-04-03 09:04:31

質問

私はここで動作するコードを持っています。 http://jsfiddle.net/WVm5d/ (中央揃え効果を見るには、結果ウィンドウを大きくする必要があるかもしれません)

質問

コードはうまくいくのですが、私は display: table; . wrap-classをセンター揃えにするのは、これしかないんです。を使う方法があれば、より良いと思います。 display: block; または display: inline-block; . 別の方法でalign centerを解決することは可能でしょうか？

コンテナに固定withを追加するのは、私には選択肢にないのです。

また、今後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>

解決方法は？

の子要素が必要なので、この解決策はうまくいきません。 display: inline-block は、幅100%の親の中で水平方向と垂直方向の両方が中央になるようにします。

私は、Flexboxの justify-content と align-items プロパティがあり、それぞれ水平方向と垂直方向に要素をセンタリングすることができます。両方を center を指定すると、子要素 (あるいは複数の要素!) が完全に中央に配置されます。

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

CodePenのデモはこちらです。 と関連するコードのスニペットを以下に示します。 

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

<div class="parent">
  <a class="child" href="#0">Button</a>
</div>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します