Question

我的页面顶部有标签导航（page here;标签是'制作'，'故事和开发'等）。我想确保标签行在页面上水平居中。我怎么能做到这一点？如果我没有弄错的话，那么目前有点偏离中心。

按照W3 Schools page on CSS centering上的说明，我接近设置：

display: block;
margin: auto;
width: 99%;

但我不确定这是否是正确/最佳解决方案。是否有解决方案不需要设置width: 99%？

如果重要，该网站已使用WordPress构建。

感谢。

Answer 1

您有两种方法可以解决这个问题：

text-align: center方法

.ut-nav-tabs li {
    display: inline-block;
    float: none;
    vertical-align: top;
}

.ut-nav-tabs li:last-child {
    margin-right: 0px;
}

.ut-nav-tabs {
    text-align: center;
}

仅当您在包含的父级上声明text-align: center时，此方法才有效 - 父元素必须是块元素。嵌套的子元素必须是内联块元素（例如：display: inline-block），并且没有声明float个规则，float将取消任何水平居中的尝试以这种方式对齐元素，以及其他大多数方式。

display: flex方法

.ut-nav-tabs {
    display: flex;
    justify-content: space-around;
}

.ut-nav-tabs li {
    float: none;
    margin-right: 0px;
}

这是块上的“新手”和关于CSS的任何对齐问题的“热点修复”，我现在可能会说它现在是CSS的“jQuery”。无论如何，这是有充分理由的，flex-box规则允许您指定一般对齐（水平和垂直）并让浏览器执行所有计算以进行精确定位 - 这也是为什么流行的响应式解决方案也是如此。

浏览器兼容性尽管如此，flex-box对旧版浏览器的支持很少或非常有限，旧浏览器可能会给您带来意想不到的结果，因此您应该谨慎使用生产代码，如果这将成为一个问题。

Answer 2

我认为这种方式更好：

.ut-nav-tabs {
    width: 100%;
    text-align: center;
}
.ut-nav-tabs li {
    width: 179px;
    float: none;
    display: inline-block;
    zoom: 1;
    vertical-align: middle;
}

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

2 个答案: