将浮动项置于<ul>中并应用list-style-type </ul>

Question

我正在尝试将嵌套的ul项目中的光盘显示为

下面的图像

现在，list-style-type正在运行，但我不知道将float元素（<li>）居中。对于第一项，光盘出现在图标上方。你可以看到我的网站来澄清我说的话。非常感谢帮助我。

http://thehung.esy.es/Mozzarella/menu.html

更新：通过使用伪元素添加光盘来修复自己，感谢所有投票支持此问题的人，让我无法发布更多问题：）

Answer 1

在ul元素之外添加一个div，如下所示。

 <div style="text-align:center">
  <ul class="categories">
                    <li>
                        <a href="#">
                            <div class="box-icon">
                                <i class="circle-icon fa fa-android"></i>
                            </div>

                            <div class="tooltip">
                                <span>Facebook</span>
                            </div>  <!-- end tooltip -->
                        </a>
                    </li>
                    <li>
                        <div class="box-icon">
                            <a href="#"><i class="circle-icon fa fa-android"></i></a>
                        </div>
                    </li>
                    <li>
                        <div class="box-icon">
                            <a href="#"><i class="circle-icon fa fa-android"></i></a>
                        </div>
                    </li>
                    <li>
                        <div class="box-icon">
                            <a href="#"><i class="circle-icon fa fa-android"></i></a>
                        </div>
                    </li>
                    <li>
                        <div class="box-icon">
                            <a href="#"><i class="circle-icon fa fa-android"></i></a>
                        </div>
                    </li>
                    <li>
                        <div class="box-icon">
                            <a href="#"><i class="circle-icon fa fa-android"></i></a>
                        </div>
                    </li>
                </ul>
     </div>

同时更新您的.categories课程，如下所示。

 .categories
  {
    display: inline-block;
    margin: 0 auto 70px;
    width: auto;
  }