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

在切網頁版的時候,常常需要用到選單水平居中,雖然用<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>

參考:

相關文章:

READ  jQuery selector 替代萬用字元 模糊查找元素

發表迴響

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