Html 使用CSS对中选项卡

我在将选项卡菜单集中在我的网站上时遇到问题。我尝试了一些以前在其他问题上发表过的解决方案，但由于它们对我不起作用，我希望你也能帮助我

/*---选项卡链接---*/ /*Clearfix*/ .tab链接：之后{ 显示：块； 明确：两者皆有； 内容：； } .选项卡链接{ 宽度：100%； 边框底部：1px实心E6； 保证金：自动0； 边缘底部：15px； } .tab链接李{ 保证金：自动0； 左边距：2倍； /*浮动：左*/ 显示：内联块； 列表样式：无； } .选项卡链接a{ 填充：9px 10px； 显示：内联块； 字体大小：12px； 字号：600； 颜色：8080； 文字装饰：无； 文本对齐：居中； } .选项卡链接a：悬停{ 颜色：2ebb98； } 李,主动,， a:悬停{ 颜色：2ebb98； 边框底部：2px实心2eb98； } 由于s是内联块，所以可以添加一个左填充：0；默认情况下，浏览器会向ul和text align添加一个填充：center；谢谢你

/*---选项卡链接---*/ /*Clearfix*/ .tab链接：之后{ 显示：块； 明确：两者皆有； 内容：； } .选项卡链接{ 宽度：100%； 边框底部：1px实心E6； 保证金：自动0； 边缘底部：15px； 文本对齐：居中； 左侧填充：0； } .tab链接李{ 保证金：自动0； 左边距：2倍； /*浮动：左*/ 显示：内联块； 列表样式：无； } .选项卡链接a{ 填充：9px 10px； 显示：内联块； 字体大小：12px； 字号：600； 颜色：8080； 文字装饰：无； 文本对齐：居中； } .选项卡链接a：悬停{ 颜色：2ebb98； } li.active a，li.active a:悬停{ 颜色：2ebb98； 边框底部：2px实心2eb98； }

---

使元素灵活是证明内容合理性的好方法

.tab-links {
    display: flex;
    justify-content: center;
}

.tab链接中的内容是内联块

只需添加文本对齐：居中；指向.tab链接

就这样

.tab-links {
  text-align: center;
}

演示

/*---选项卡链接---*/ /*Clearfix*/ .tab链接：之后{ 显示：块； 明确：两者皆有； 内容：； } .选项卡链接{ 宽度：100%； 边框底部：1px实心E6； 保证金：自动0； 边缘底部：15px； /*更新代码*/ 文本对齐：居中； } .tab链接李{ 保证金：自动0； 左边距：2倍； /*浮动：左*/ 显示：内联块； 列表样式：无； } .选项卡链接a{ 填充：9px 10px； 显示：内联块； 字体大小：12px； 字号：600； 颜色：8080； 文字装饰：无； 文本对齐：居中； } .选项卡链接a：悬停{ 颜色：2ebb98； } 李,主动,， a:悬停{ 颜色：2ebb98； 边框底部：2px实心2eb98； }

---

菜单居中是因为您将其宽度定义为100%。如果你想将li集中在ul内部，那么使用Jonathan的解决方案