對齊內聯塊中心

Question

中心對齊內聯塊元素的最簡單方法是什么？

理想情況下，我不想為元素設置寬度。 這種方式取決於在元素內輸入的文本，內聯塊元素將擴展到新的寬度，而不必改變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);
        }
    }
}

在兩個元素之間添加一個br並取出浮動：left / clear：left可能是最簡單的方法; 但是，如果有另一種方式，我很好奇。

Answer 1

像這樣？ http://jsfiddle.net/bcL023ko/3/移除float:left並添加margin: 0 auto使元素居中。 或者它是您正在尋找的其他東西？