中心对齐内联块元素的最简单方法是什么？

理想情况下,我不想为元素设置宽度.这种方式取决于在元素内输入的文本,内联块元素将扩展到新的宽度,而不必改变CSS内的宽度.内联块元素应该彼此重心(不是并排),以及元素内的文本.

请参阅下面的代码或参见jsFiddle.

当前的HTML：

目前的SCSS：

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

body {

margin: 0 auto;

background: rgba(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,1);

}

&:last-child {

color: white;

background: rgba(117,80,161,1);

}

}

}

在两个元素之间添加一个br并取出浮动：left / clear：left可能是最简单的方法;但是,如果有另一种方式,我很好奇.