如何将导航栏中的列表项居中

Question

我在使用 CSS3 将我的网站上的列表项居中时遇到了一些问题，知道为什么我无法将这些项居中吗？

下面是我的问题的截图： https : //gyazo.com/4b68df7e38e71ae320fdb6cb1c0c4e87

下面是我为导航栏编写的 CSS3 和 HTML 代码：

 .navigation ul { background-color: #A1C9EC; border-style: solid; border-color: #9FABB6; border-width: 1px; } .navigation ul li { display: inline-block; border-style: solid; border-color: #9FABB6; border-width: 1px; border-radius: 5px; padding-left: 1em; padding-right: 1em; background-color: #ffffff; border-top-color: #ffffff; margin: 1em; }

 <!--Wrapper to adjust width of main body on desktop site.--> <div class="wrapper"> <h1>Shane's Portfolio</h1> <!--Navigation Bar (TOP)--> <div class="navigation"> <nav> <ul> <li>Home</li> <li>My Work</li> <li>Qualifications</li> <li>About Me</li> <li>Contact Me</li> </ul> </nav> </div>

Answer 1

text-align: center;

在包装 div 上应该可以解决问题。 如果您可以共享 html 代码，则很容易给出答案

Answer 2

你需要添加

text-align: center;
padding-left: 0;

到.navigation ul { <ul> s 有默认填充，这就是为什么你需要将它设置为0 。

（此外，如果您单击“运行代码剪断”，我还缩短了导航列表和单词以获得正确的输出）

 .navigation ul{ background-color: #A1C9EC; border-style: solid; border-color: #9FABB6; border-width: 1px; text-align: center; padding-left: 0; } .navigation ul li { display: inline-block; border-style: solid; border-color: #9FABB6; border-width: 1px; border-radius: 5px; padding-left: 1em; padding-right: 1em; background-color: #ffffff; border-top-color: #ffffff; margin: 1em; }

 <div class="wrapper"> <h1>Shane's Portfolio</h1> <!--Navigation Bar (TOP)--> <div class="navigation"> <nav> <ul> <li>Home</li> <li>My</li> <li>Qua</li> </ul> </nav> </div> </div>