ul如何在div中居中顯示

編輯：雲鴉網絡 時(shí)間：2021-09-29 16:52

我們在寫代碼的(de)過程中常會遇到ul li 浮動成一行并居中顯示的(de)情形。那麽ul在div中居中顯示該如何實現呢(ne)？



        <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">銷售熱(rè)線：</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 屬性可(kě)以讓ul改爲表格格式，margin:0 auto 讓ul在div中居中。text-align:center ul中的(de)文字居中。