簡單兩步使用css控制div下導航欄ul居中顯示

第一步：父層設置文本居中屬性

ul{
    text-align:center;
}

第二步：li設置內聯樣式

li{
    display:inline;
}

PS

只需以上兩步就能夠實現導航欄居中顯示了，但爲了美觀好看，能夠稍微加點料。如下供參考

<style type="text/css">
    body{
        background:#232e3c;
        padding:16px;
    }
    #nav ul{
        text-align:center;
        list-style:none;
    }
    #nav li{
        display:inline;
        margin-left:16px;
        background:#fff;
        border-radius:25px;
        padding:10px;
    }
    #nav a{			
        color:#000;
        text-decoration:none;
        font-size:18px;
        font-weight:bold;
        font-family:consolas;
    }
    #nav li:hover{
        background:#7bc3d6;
    }
</style>

• list-style:none; 取消列表前面的列表樣式
• border-radius:25px; 設置圓角背景樣式
• text-decoration:none; 取消連接下劃線
• li:hover 設置一下鼠標移上去時的背景變色