html - 对齐行内 block 中心

Question

居中对齐行内 block 元素的最简单方法是什么？

理想情况下，我不想为元素设置宽度。这样，根据在元素中输入的文本，内联 block 元素将扩展到新的宽度，而无需更改 CSS 中的宽度。行内 block 元素应该彼此居中(而不是并排)，元素中的文本也是如此。

请参阅下面的代码或在 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，去掉float:left/clear:left可能是最简单的方法；但是，我很好奇是否还有其他方法可以解决此问题。

Answer 1

像这样？ http://jsfiddle.net/bcL023ko/3/ 移除 float:left 左侧并添加 margin: 0 auto 以使元素居中。还是您正在寻找其他东西？