Html CSS中心导航栏链接

导航栏上的一些文本链接无法居中，左边距和右边距自动功能无法工作，我尝试将显示类型设置为块/内联块，但没有效果。答案可能就在眼前，我知道，但我真的找不到答案

CSS:

HTML:

---

添加

文本对齐：居中到您的
导航链接
类

.nav-link
{
text-align:center;
}

添加
文本对齐：居中到您的
导航链接
类

.nav-link
{
text-align:center;
}

尝试：

尝试：

看起来您正在将
.navlink
width
设置为
100%
。将其缩小到其他内容的宽度。我尝试了
800px
，效果很好。
看起来您正在将
设置为
宽度
设置为
100%
。将其缩小到其他内容的宽度。我尝试了
800px
，效果很好。
顶部的徽标居中，因为它有固定的宽度。导航条未居中，因为它是屏幕宽度的100%。如果将其设置为较低的百分比或使用与徽标图像相同的固定宽度，则它将居中工作

.navlink {
    margin-left:auto;
    margin-right: auto;
    width: 1024px;
    font-size: 28px;
    text-transform: uppercase;
}

顶部徽标居中，因为它具有固定的宽度。导航条未居中，因为它是屏幕宽度的100%。如果将其设置为较低的百分比或使用与徽标图像相同的固定宽度，则它将居中工作

.navlink {
    margin-left:auto;
    margin-right: auto;
    width: 1024px;
    font-size: 28px;
    text-transform: uppercase;
}

这对我有用

这对我很有效。
我还有一个很好的解决方案给你

<div id="nav">
    <span><a href="#">Twitter</a></span>
    <span><a href="#">Facebook</a></span>
    <span><a href="#">YouTube</a></span>
</div>


<!--Css style sheet for above code-->
#nav{
   width:100%;
   text-align:center;
}
#nav span a{
   text-decoration:none;
   padding:10px;
}


#导航{
宽度：100%；
文本对齐：居中；
}
#导航跨度a{
文字装饰：无；
填充：10px；
}
我还有一个很好的解决方案给你

<div id="nav">
    <span><a href="#">Twitter</a></span>
    <span><a href="#">Facebook</a></span>
    <span><a href="#">YouTube</a></span>
</div>


<!--Css style sheet for above code-->
#nav{
   width:100%;
   text-align:center;
}
#nav span a{
   text-decoration:none;
   padding:10px;
}


#导航{
宽度：100%；
文本对齐：居中；
}
#导航跨度a{
文字装饰：无；
填充：10px；
}
使用flex使其更加灵活：

.navmenu { margin: 0 auto }
.navlink { display: flex; justify-content: center }

使用flex使其更加灵活：

.navmenu { margin: 0 auto }
.navlink { display: flex; justify-content: center }

您正在.navlink上跟踪CSS

 .navlink {
  display: flex;
  justify-content: center;
}


.navmenu{
背景色：#1E；
边框顶部：1px实心#3838；
边缘底部：5px；
z指数：105；
}
.导航链接{
字体大小：14px；
文本转换：大写；
显示器：flex；
证明内容：中心；
}
.导航链接a{
颜色：#fff；
}
您可以在.navlink上使用CSS

 .navlink {
  display: flex;
  justify-content: center;
}


.navmenu{
背景色：#1E；
边框顶部：1px实心#3838；
边缘底部：5px；
z指数：105；
}
.导航链接{
字体大小：14px；
文本转换：大写；
显示器：flex；
证明内容：中心；
}
.导航链接a{
颜色：#fff；
}

干杯，知道这将是一件非常简单的事情，总是想得太多。虽然这会起作用，但要注意，当你将页面缩小得太薄时，它可能看起来很奇怪。干杯，知道这将是一件非常简单的事情，总是想得太多。虽然这会起作用，请注意，当你将页面缩小得太薄时，它可能看起来很奇怪。嗯，我用文本对齐中心将其修复，但我会记住这一点。干杯。我不知道为什么这被否决了。导航栏有一个固定宽度的图像，不能缩小。嗯，我用文本对齐中心对其进行了调整，但我会记住这一点。干杯。我不知道为什么这被否决了。导航栏有一个固定宽度的图像，不能缩小。根据我的问题，这似乎是正确的解决方案。这个页面应该能更好地结合在一起。在我看来，基于这个问题，这似乎是正确的解决方案。页面应该保持在一起。如果有任何答案解决了你的问题，请考虑通过点击复选标记和上投票来接受它。这向更广泛的社区表明，你已经找到了一个解决方案，并给回答者和你自己带来了一些声誉。没有义务这样做。如果有任何答案解决了你的问题，请考虑通过点击复选标记和上投票来接受它。这向更广泛的社区表明，你已经找到了一个解决方案，并给回答者和你自己带来了一些声誉。没有义务这样做。