CSS：如何在页面上水平居中这个特定元素？

Question

我有一个顶部带有选项卡导航的页面(此处为页面; 选项卡为“生产”、“故事与发展”等）。我想确保选项卡行在页面上水平居中。我如何才能做到这一点？如果我没弄错的话，现在是一点点偏离中心。

按照W3学校CSS中心页面，我通过设置接近：

显示：块；边距：自动；宽度：99%；

但我不确定这是否是正确/最佳的解决方案。是否有不需要设置的解决方案宽度：99%?

如果重要的话，这个网站是用WordPress构建的。

谢谢。

Answer 1

你有两种方法可以做到这一点：

这个文本对齐：居中方法

.ut-nav-标签li{显示：嵌入式块；float：无；垂直对齐：顶部；}.ut-nav-tabs li：最后一个子级{边距-右：0px；}.ut-nav-标签{文本对齐：居中；}

只有当你声明文本对齐：居中在包含父元素上-父元素必须是块元素。嵌套的子元素必须是内联块元素（例如：显示：内联块)没有浮动他们宣布的规则，浮动s将否定以这种方式以及大多数其他方式水平居中对齐元素的任何尝试。

这个显示：柔性方法

.ut导航选项卡{显示：flex；justify-content:空间-圆形；}.ut-nav-标签li{float：无；边距-右：0px；}

这是块上的“新孩子”，是目前任何与CSS有关的对齐问题的“热修复程序”，我冒昧地说这是CSS的“jQuery”。无论如何，这是有充分理由的，柔性接线盒规则允许您指定总体对齐（水平和垂直），并允许浏览器进行所有精确定位的计算&这也是为什么也是一个流行的响应解决方案。

浏览器兼容性：不过，这是一个警告，柔性接线盒对旧式浏览器的支持较差或非常有限，较旧的浏览器可能会给您带来意外的结果，因此，如果担心这一点，您应该在生产代码中谨慎使用。

Answer 2

我认为这样更好：

.ut-nav-标签{宽度：100%；文本对齐：居中；}.ut-nav-标签li{宽度：179px；float：无；显示：嵌入式块；缩放：1；垂直对齐：中间；}