How to center all child elements with float left property - css

Question

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.
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

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>

Answer 2

Try following code :
.section-title {
text-align: center;
display: block;
}
.section-title span {
font-size: 36px;
display: inline-block;
text-transform: uppercase;
}