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

.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做到这一点?

最佳答案

如果下拉列表始终具有固定的宽度,则可以相对于其包含块的宽度通过left: 50%定位它们,然后将它们的中心对齐,以负的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+

10-05 20:57
查看更多