如何使用float left属性居中所有子元素

Question

我无法找到解决问题的方法。我不希望子元素之间有任何空格，所以我添加了float：left to child elements。但是当元素分成两行时，它会导致问题。

http://jsfiddle.net/cmrunhow/5/

HTML：

<span class="section-title">
    <span class="yellow">This</span>
    <span class="red">is</span>
    <span class="brown">test</span>
    <span class="">content</span>
</span>

CSS：

.section-title {text-align:center;}
.section-title span {float: left; display:inline-block;}

Answer 1

要删除不需要的空间，请不要float: left;，而是在父元素上设置font-size: 0;，将子设备重新设置为您想要的font-size。

此外，您使用span作为容器，默认情况下为display: inline;。在这里，您需要一个具有display: block;的元素。使用display: inline;时，文本居中无法正常工作。

所以 设置display: block; 上的span或使用div而不是span。默认情况下，div有display: block;。我推荐后者，但我不确定你是否可以控制HTML，所以我没有改变它。

＆＃13;

＆＃13;

.section-title {
  text-align: center;
  font-size: 0;
  display: block;
}
.section-title span {
  font-size: 36px;
  display: inline-block;
  text-transform: uppercase;
}
.yellow {
  color: yellow;
}
.red {
  color: red;
}
.brown {
  color: brown;
}

＆＃13;

<span class="section-title">
  <span class="yellow">This</span>
  <span class="red">is</span>
  <span class="brown">test</span>
  <span>content</span>
</span>

＆＃13;

＆＃13;

＆＃13;

Answer 2

请尝试以下代码：

.section-title {
   text-align: center;
   display: block;
 }

 .section-title span {
     font-size: 36px;
     display: inline-block;
     text-transform: uppercase;
  }