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百分比或抵消元素的固定宽度，但我可以说这不是居中的 - 尤其是 all < / em>容器。是否可以通过CSS执行此操作？

Answer 1

如果下拉列表始终具有固定的宽度，则可以将它们定位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+

Answer 2

我认为这个问题的最佳方法是

.dropdown { 
   /* other styles here... */ 
   left: 0; 
   right: 0; 
   margin: 0 auto; 
}

您可以使用此方法将中心位置固定：固定元素！

在可变宽度项目下水平居中固定宽度项目

2 个答案: