Left-, Right-, and Center-Aligned Headings

While implementing a range slider input for a recent project I needed headings for the three available stop-points, one left-aligned, one centered, and one right-aligned. After a bit of verbose HTML and CSS, I refined it several times and settled on the following code.

.ranges {
    text-align: center;

.ranges span:first-child {
    float: left;

.ranges span:last-child {
    float: right;
<div class="ranges">  

Photo by Elliott Engelmann at Unsplash