CSS li float:center 實現li水平居中對齊

2020/03/12 更新
發現更簡單的方法,請參考這篇文章
https://vector.cool/css-ul-li-horizontal-align-center-only-css/
在切網頁版的時候,常常需要用到選單水平居中,雖然用<a>標籤很方便,在父容器下text-align center,就可達成上圖編排,但有時候HTML並不是由設計師自己開的,很多清單功能的在HTML上都會用<ul><li>方式呈現,例如頁碼,這是一個普遍慣用的作法,工程師一目了然。
但前端設計師套CSS時卻會遇到無法居中對齊問題,可以向左對齊,可以向右對齊,就是不能水平居中對齊,所以本篇提供一個解決方法,可以順利向上圖一樣,項目居中對齊。
HTML:
<div class="main-container">
    <div class="fixer-container">
        <ul class="list-of-floating-elements">
            <li class="floated">Floated element</li>
            <li class="floated">Floated element</li>
            <li class="floated">Floated element</li> 
        </ul>
    </div>
</div>

CSS:

<style>
ul li{
	float:left;
	margin:0 20px
}
.main-container {
	float:left;
	position:relative;
	left:50%;
}
.fixer-container {
	float:left;
	position:relative;
	left:-50%;
}
</style>

參考:

如果文章對您很有幫助
請我喝杯咖啡吧

Bitcoin 比特幣錢包:

18fCwNnEJ7UfMNS3GcUczPNa72NMsWcvaU



ann71727

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料