对齐内联块中心

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

理想情况下，我不想为元素设置宽度。这种方式取决于元素内输入的文本，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和取出浮动：左/明确：左可以是最简单的方法;然而，我很好奇，如果有另一种方式去做这件事。

来源

2014-10-30 Andrew

可能重复[是否可以居中内嵌块元素，如果是这样，如何？]（http://stackoverflow.com/questions/7601678/is-it-possible-to-center-an-inline -block-element-and-if-so-how） – 2015-06-23 14:08:55

是否这样？ http://jsfiddle.net/bcL023ko/3/ 删除左侧的float:left，并添加margin: 0 auto以将元素居中。或者是你在寻找的其他东西？

来源

2014-10-30 16:11:11

如果父项的'text-align：center'为'inline-block'元素，则不需要使用'margin：0 auto'-http：/ /jsfiddle.net/bcL023ko/4/ – 2014-10-30 16:22:42

@ k-nut我正在寻找堆叠在一起的元素，而不是并排。 – Andrew 2014-10-30 17:12:46

@ k-nut我正在寻找堆叠在一起的元素。 – Andrew 2014-10-30 17:12:59

对齐内联块中心

回答

相关问题