Question

我在div元素中有一些动态创建的JQuery Mobile图标。可以显示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方法，但是他们不能在我的位置上工作，因为它弄乱了图标和＆＃34; notext＆＃34;。也尝试使用div而不是跨度，但这并没有改变任何东西。

感谢您提前提供任何帮助。

Answer 1

默认情况下，

span元素是内联元素，因此会尊重text-algin: center;属性。如果您需要设置高度，则必须使它们成为inline-block个元素。如此设置它们，并将其父级设置为text-algin: center，它们将始终居中。您可以在侧面添加边距以增加间距。

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

横向居中我的图标

1 个答案: