css - 在可变宽度元素下水平居中固定宽度元素

Question

我有一个菜单，某些元素有下拉菜单。这些元素具有可变宽度。我希望下拉列表在其特定元素下方水平居中。下拉列表本身始终具有固定宽度。

.container {
    display: inline-block;
    position: relative;
}
.dropdown {
    display: none;
    top: 100%;
    position: absolute;
    width: 100px;
}
.container:hover .dropdown {
    display: block;
}

http://jsfiddle.net/8AauA/

我试过使用 margin-left/left 和百分比或偏移元素的固定宽度，但我可以看出这不是居中的——尤其是对于所有 容器。可以通过 CSS 实现吗？

Answer 1

如果下拉列表始终具有固定宽度，您可以将它们定位为 left: 50%这是相对于它们的包含 block 的宽度，然后通过负数将它们居中对齐 margin作为宽度的一半。

Example Here

.dropdown {
    /* other styles here... */
    left: 50%;
    margin-left: -50px; /* = width / 2 */
}

---

但是，如果它们具有动态宽度，您可以使用 CSS3 translateX()函数而不是负边距来达到预期的结果

Example Here

.dropdown {
    /* other styles here... */
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

值得注意的是转换 are supported in IE9+