ul如何在div中居中显示

编辑:云鸦网络 时间:2021-09-29 16:52

我们在写代码的过程中常会遇到ul li 浮动成一行并居中显示的情形。那么ul在div中居中显示该如何实现呢?



        <ul class="contact" style="display: table;margin:0 auto;text-align: center;">
            <li>
               <div class="icon"><img src="/images/icon-1.png"></div>
               <div class="text">销售热线:</div>
            </li>
            <li>
               <div class="icon"><img src="/images/icon-2.png"></div>
               <div class="text">座机:</div>
            </li>
            <li>
               <div class="icon"><img src="/images/icon-3.png"></div>
               <div class="text">售后服务:</div>
            </li>
            <li>
               <div class="icon"><img src="/images/icon-4.png"></div>
               <div class="text">公司地址:</div>
            </li>
        </ul>

display:table 属性可以让ul改为表格格式,margin:0 auto 让ul在div中居中。text-align:center ul中的文字居中。