無法導航欄居中

Question

嘗試了很多不同的東西，但無法弄清楚爲什麼它不會居中。任何幫助都是極好的！

nav { 
 
    font-size: 18px; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    display: inline-block; 
 
} 
 
li { 
 
    display: inline-block; 
 
} 
 
li a { 
 
    color: #F55F5F; 
 
    padding: 10px 15px; 
 
    text-decoration: none; 
 
    text-align: center; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="Home.html">Home</a> 
 
    </li> 
 
    <li><a href="Services.html">Services</a> 
 
     <li><a href="About.html">About Us</a> 
 
     </li> 
 
     <li><a href="Contact.html">Contact Us</a> 
 
    </ul> 
 
</nav>

Answer 1

你可以做兩兩件事來居中ul：

1. 添加text-align: center到nav到中心裏面的ul。

2. 復位的ul

默認左填充

請參見下面的演示：

nav { 
 
    font-size: 18px; 
 
    text-align: center; 
 
} 
 
ul { 
 
    padding: 0; 
 
    list-style-type: none; 
 
    display: inline-block; 
 
} 
 
li { 
 
    display: inline-block; 
 
} 
 
li a { 
 
    color: #F55F5F; 
 
    padding: 10px 15px; 
 
    text-decoration: none; 
 
    text-align: center; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="Home.html">Home</a> 
 
    </li> 
 
    <li><a href="Services.html">Services</a> 
 
     <li><a href="About.html">About Us</a> 
 
     </li> 
 
     <li><a href="Contact.html">Contact Us</a> 
 
    </ul> 
 
</nav>

Answer 2

nav{ 
    text-align: center; 
    background: green; 
} 
ul{ 
    padding: 0; 
} 

Answer 3

只是把文字居中對齊，以資產淨值

nav { 
    text-align: center; 
    }