Pratik Deshmukh Pratik Deshmukh - 10 days ago 5
CSS Question

How to center all child elements with float left property

I was unable to find any solution to my problem. I don't want any space between child elements so i have added float:left to child elements. But it is causing problem when elements breaks into 2 lines.Expected Output

Issue

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

To remove the unwanted space, don't float: left;, but set font-size: 0; on the parent element, re-setting it on the children to the font-size you want.

Also, you used a span for the container which by default has display: inline;. Here, you want an element that has display: block;. With display: inline; the text-centering cannot work.

So either set display: block; on the span or use a div instead of a span. div has display: block; by default. I'd recommend the latter, but I'm not sure whether you have control over the HTML, so I did not change it.

.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;
}
<span class="section-title">
  <span class="yellow">This</span>
  <span class="red">is</span>
  <span class="brown">test</span>
  <span>content</span>
</span>