使用CSS中心

Question

我有一个菜单，我想用CSS中心。

当前代码：

.menu {
    margin:10px 0 10px 20px;
    float:right;
}
.menu li {
    padding:0 20px 0 20px;
    border-left:1px solid #FFF;
    border-right:1px solid #DDD;
    float:left;
}
.menu li.first {
    border-left:none;
}

我会添加/更改/删除哪些菜单显示中心而不是左/右？谢谢！

Answer 1

最简单的方法之一是将左边距和右边距都设置为auto，并为元素指定固定宽度：

.menu {
    width: 500px; // or whatever
    margin-left: auto;
    margin-right: auto;
}

W3C recommends如果您希望.menu元素与内容紧密相关，则可能需要使用绝对定位和50％边距，如下所示：

.menu {
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

您可以在W3C页面上查看其工作原理。但是，第一种方法更常见（和可读）。