horizontally center my icons

Question

I have some dynamically created JQuery Mobile icons inside a div element. There can be 0 to 4 icons displayed, depending on some variables.

I want to make sure that those icons are horizontally centered, no matter how much are displayed and even though reading through lots of threads I still haven't figured out how to make it work.

Code:

HTML:

 <div class="icons">
   <span class="reported notifIcon ui-btn ui-icon-alert ui-btn-icon-notext ui-corner-all">Reported often</span>
   <span class="verf notifIcon ui-btn ui-icon-star ui-btn-icon-notext ui-corner-all">Verified</span>
   <span class="active notifIcon ui-btn ui-icon-clock ui-btn-icon-notext ui-corner-all">Recently active</span>
 </div>

CSS:

.icons {
    width: 100%;
    height: 60px;
}

span.notifIcon {
    float: left;
    width: 30px;
    height: 30px;
}

div span.notifIcon.reported {
    border-radius: 25px;
    background-color: rgba(209, 44, 44, 0.4);
}

div span.notifIcon.verf {
    border-radius: 25px;
    background-color: rgba(16, 105, 203, 0.4);
}

div span.notifIcon.active {
    border-radius: 25px;
    background-color: rgba(89, 219, 42, 0.4);
}

I am not including the classes provided by JQuery Mobile since I dont use them in the JSFiddle either. Also I have the overly specific CSS selectors, since they should stand out from the JQuery Mobile classes.

https://jsfiddle.net/dLLcrag0/

What have I tried already?

I tried the margin 0 auto; approach as well as the display: table; with that. I tried display: inline approaches, but they won't work in my position, because it messes up the icons and the "notext". Also tried to use divs instead of spans, but this didn't change anything either.

Thanks for any help in advance.

Answer 1

span elements are by default inline elements and as such will respect the text-algin: center; property. If you need a set height you must make them inline-block elements. Set them as such, and set their parent to text-algin: center and they will always be centered. You can add margin to their sides to increase spacing as well.

https://jsfiddle.net/dLLcrag0/2/