горизонтально центр мои значки

Question

У меня есть некоторые динамически созданные значки JQuery для мобильных устройств внутри элемента div. В зависимости от некоторых переменных может отображаться от 0 до 4 значков.

Я хочу удостовериться, что эти значки расположены по горизонтали, независимо от того, сколько они отображаются, и даже при чтении многих потоков я до сих пор не понял, как заставить его работать.

Код:

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); 
} 

Я не включая классы, предоставляемые JQuery Mobile, так как я не использую их в JSFiddle либо. Также у меня есть слишком специфичные селектора CSS, поскольку они должны выделяться из классов JQuery Mobile.

https://jsfiddle.net/dLLcrag0/

Что я уже пробовал?

Я пробовал подход margin 0 auto;, а также display: table; с этим. Я попытался использовать display: inline, но они не будут работать в моем положении, потому что это испортит значки и «notext». Также пытался использовать divs вместо spans, но это тоже ничего не меняло.

Благодарим за любую помощь заранее.

Answer 1

span элементы по умолчанию являются встроенными элементами и, как таковые, будут уважать собственность text-algin: center;. Если вам нужна высота набора, вы должны сделать их inline-block элементов. Установите их как таковые и установите их родителям в text-algin: center, и они всегда будут центрироваться. Вы можете добавить маржу к их сторонам, чтобы увеличить интервал.

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