Html 如何将列表项水平居中？

我有一段代码的摘录，需要集中在标题中（只有文本和实际的填充）。我是一个新的编码，所以如果这听起来不正确，不要感到惊讶。这是我需要以列表项为中心的代码。尽量让你的答案像初学者一样

CSS:

HTML:

---

我知道

li

元素很乱，但我这样做是为了看得更清楚。抱歉。

将

文本对齐：居中添加到
：

#navcontainer ul{
文本对齐：居中；
}

片段


#navcontainer ul{
列表样式类型：无；
保证金：0；
填充：0；
字体系列：“Raleway”，无衬线；
字体大小：23px；
颜色：80万；
文本对齐：居中；
}
#纳武利{
显示：内联；
}
#Navul li a{
文字装饰：无；
填充：0px；
利润率：40像素；
}
#Navul li a:悬停{
颜色：#fff；
背景色：#800000；
}











将
文本对齐：居中添加到
：

#navcontainer ul{
文本对齐：居中；
}

片段


#navcontainer ul{
列表样式类型：无；
保证金：0；
填充：0；
字体系列：“Raleway”，无衬线；
字体大小：23px；
颜色：80万；
文本对齐：居中；
}
#纳武利{
显示：内联；
}
#Navul li a{
文字装饰：无；
填充：0px；
利润率：40像素；
}
#Navul li a:悬停{
颜色：#fff；
背景色：#800000；
}











您的标记中有一些错误，我已经为您修复了它们。如果要将列表项定位为内联元素，则将其居中所需的就是文本对齐：居中

<div id= "navcontainer">
    <ul>
        <li>
            <a id="index" class="page-logo" href="/">
                <img src="slamlogo.png" alt="Logo">
            </a>
        </li>
        <li><a href="/Jackpot">Jackpot</a></li>
        <li><a href="/Profile">Profile</a></li>
        <li><a href="/Market">Market</a></li>
        <li><a href="/Support">Support</a></li>
    </ul>
</div>

#navcontainer ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-family:'Raleway', sans-serif;
    font-size: 23px;
    color: #800000;
    text-align: center;
}
#navcontainer ul li {
    display: inline;
}
#navcontainer ul li a {
    text-decoration: none;
    padding: 0px;
    margin: 40px;
}
#navcontainer ul li a:hover {
    color: #fff;
    background-color: #800000;
}










#纳瓦尔{
列表样式类型：无；
保证金：0；
填充：0；
字体系列：“Raleway”，无衬线；
字体大小：23px；
颜色：80万；
文本对齐：居中；
}
#纳武利{
显示：内联；
}
#Navul li a{
文字装饰：无；
填充：0px；
利润率：40像素；
}
#Navul li a:悬停{
颜色：#fff；
背景色：#800000；
}


为了进一步解释这些变化，您应该只在无序列表（ul）中添加li元素，因此我将您的徽标嵌套在列表项中。我还关闭了一些未关闭的标记。
您的标记中有一些错误，我已经为您修复了它们。如果要将列表项定位为内联元素，则将其居中所需的就是文本对齐：居中

<div id= "navcontainer">
    <ul>
        <li>
            <a id="index" class="page-logo" href="/">
                <img src="slamlogo.png" alt="Logo">
            </a>
        </li>
        <li><a href="/Jackpot">Jackpot</a></li>
        <li><a href="/Profile">Profile</a></li>
        <li><a href="/Market">Market</a></li>
        <li><a href="/Support">Support</a></li>
    </ul>
</div>

#navcontainer ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-family:'Raleway', sans-serif;
    font-size: 23px;
    color: #800000;
    text-align: center;
}
#navcontainer ul li {
    display: inline;
}
#navcontainer ul li a {
    text-decoration: none;
    padding: 0px;
    margin: 40px;
}
#navcontainer ul li a:hover {
    color: #fff;
    background-color: #800000;
}










#纳瓦尔{
列表样式类型：无；
保证金：0；
填充：0；
字体系列：“Raleway”，无衬线；
字体大小：23px；
颜色：80万；
文本对齐：居中；
}
#纳武利{
显示：内联；
}
#Navul li a{
文字装饰：无；
填充：0px；
利润率：40像素；
}
#Navul li a:悬停{
颜色：#fff；
背景色：#800000；
}


为了进一步解释这些变化，您应该只在无序列表（ul）中添加li元素，因此我将您的徽标嵌套在列表项中。我也关闭了一些未关闭的标签。
我的意思是垂直和水平，比如说我有一个框，或者在本例中是一个标题部分。我希望我的文本列表在框的中间，横过，（X轴和Y轴），而且普拉文，你的意思是什么除了< LI>在我的UL >？那很好，@ JasperE。那标志呢？您想让它也与
内联吗？我基本上只希望我的文本集中在给定的区域。。。请指定将我的代码添加到的位置。对不起，我对这件事很在行。@JasperE Give
#navcontainer ul{float:right；}
？如果你给出HTML和CSS或者一个实例或者一个GitHub repo，那就更好了。我的意思是垂直和水平，比如说我有一个框，或者在这个例子中是一个标题部分。我希望我的文本列表在框的中间，横过，（X轴和Y轴），而且普拉文，你的意思是什么除了< LI>在我的UL >？那很好，@ JasperE。那标志呢？您想让它也与
内联吗？我基本上只希望我的文本集中在给定的区域。。。请指定将我的代码添加到的位置。对不起，我对这件事很在行。@JasperE Give
#navcontainer ul{float:right；}
？如果你提供HTML和CSS或者一个实例或者一个GitHub repo，那就更好了。如果我也想在脚本中添加一个链接呢？我能把它也列在无序的名单上吗？它只是一个。另外，你的脚本给了我的徽标一个我不想要的悬停颜色效果。你可以用一个伪选择器从你的CSS中省略第一个列表项，我已经更新了fiddle-ughh我开始放弃这个。。。你能通过Skype和我聊天吗？我能分享屏幕吗？Idk如果我也想要脚本中的链接呢？我能把它也列在无序的名单上吗？它只是一个。另外，你的脚本给了我的徽标一个我不想要的悬停颜色效果。你可以用一个伪选择器从你的CSS中省略第一个列表项，我已经更新了fiddle-ughh我开始放弃这个。。。你能通过Skype和我聊天吗？我能分享屏幕吗？Idk了吗
<div id= "navcontainer">
    <ul>
        <li>
            <a id="index" class="page-logo" href="/">
                <img src="slamlogo.png" alt="Logo">
            </a>
        </li>
        <li><a href="/Jackpot">Jackpot</a></li>
        <li><a href="/Profile">Profile</a></li>
        <li><a href="/Market">Market</a></li>
        <li><a href="/Support">Support</a></li>
    </ul>
</div>

#navcontainer ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-family:'Raleway', sans-serif;
    font-size: 23px;
    color: #800000;
    text-align: center;
}
#navcontainer ul li {
    display: inline;
}
#navcontainer ul li a {
    text-decoration: none;
    padding: 0px;
    margin: 40px;
}
#navcontainer ul li a:hover {
    color: #fff;
    background-color: #800000;
}