中心對齊內(nèi)聯(lián)塊元素的最簡單方法是什么？

理想情況下,我不想為元素設(shè)置寬度.這種方式取決于在元素內(nèi)輸入的文本,內(nèi)聯(lián)塊元素將擴展到新的寬度,而不必改變CSS內(nèi)的寬度.內(nèi)聯(lián)塊元素應(yīng)該彼此重心(不是并排),以及元素內(nèi)的文本.

請參閱下面的代碼或參見jsFiddle.

當(dāng)前的HTML：

Hello,John Doe.

Welcome and have a wonderful day.

目前的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可能是最簡單的方法;但是,如果有另一種方式,我很好奇.

總結(jié)

以上是生活随笔為你收集整理的html中心对齐,html – 对齐内联块中心的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。