web-dev-qa-db-ja.com

インラインブロックの中心を揃える

インラインブロック要素を中央揃えにする最も簡単な方法は何ですか？

理想的には、要素に幅を設定したくありません。このように、要素内に入力されたテキストに応じて、インラインブロック要素はCSS内の幅を変更することなく新しい幅に拡張されます。インラインブロック要素は、要素内のテキストと同様に、（並べてではなく）互いの中央に配置する必要があります。

以下のコードを参照するか、 jsFiddle を参照してください。

現在のHTML：

<div>
  <h2>Hello, John Doe.</h2>
  <h2>Welcome and have a wonderful day.</h2>
</div>

現在のSCSS：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);  

body {
    margin: 0 auto;
    background: rgba(51,51,51,1);
    font-family: 'Open Sans', sans-serif;
}

div {
    width: 100%;
    height: auto;
    margin: 15% 0;
    text-align: center;
    h2 {
        margin: 0 auto;
        padding: 10px;
        text-align: center;
        float: left;
        clear: left;
        display: inline-block;
        &:first-child {
            color: black;
            background: rgba(255,255,255,1);
        }
        &:last-child {
            color: white;
            background: rgba(117,80,161,1);
        }
    }
}

2つの要素の間にbrを追加し、float：left/clear：leftを削除するのが最も簡単な方法です。しかし、これについて別の方法があるかどうか興味がありました。

htmlcentercenteringcss
6
Andrew

このような？ http://jsfiddle.net/bcL023ko/3/float:leftを削除し、margin: 0 autoを追加して要素を中央に配置します。それともあなたが探しているものは他にありますか？

8
k-nut