对齐内联块中心
问题描述:
对齐内联块元素的最简单方法是什么?对齐内联块中心
理想情况下,我不想为元素设置宽度。这种方式取决于元素内输入的文本,inline-block元素将扩展到新的宽度,而不必改变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和取出浮动:左/明确:左可以是最简单的方法;然而,我很好奇,如果有另一种方式去做这件事。
可能重复[是否可以居中内嵌块元素,如果是这样,如何?](http://*.com/questions/7601678/is-it-possible-to-center-an-inline -block-element-and-if-so-how) – 2015-06-23 14:08:55