如何将下拉菜单的子项居中到父项

Question

我正在尝试创建一个下拉菜单，其中子菜单与父菜单居中对齐。

我已经尝试过设置margin: auto;或left: -50%; right: -50%以及我在网上找到的其他解决方案，但似乎对我无效

我怎样才能做到这一点？

.header {
/*background-image: url("../images/top_menu.png");*/
width: 100%;
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
position: fixed;
top: 0;
background-origin: border-box;
height: 68px;
}
ul {
list-style-type: none;
margin: 0;
padding-left: 5%;
padding-top: 15px;
padding-bottom: 10px;
overflow: hidden;
display: inline-block;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: #000;
text-align: center;
padding: 8px 10px;
text-decoration: none;
background-color: #fff;
margin: 5px;
border-radius: 30px;
min-width: 160px;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: black;
color: white;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
text-align: center;
}
.dropdown-content a {
color: #e6e6e6;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
background-color: #333333;
}
.dropdown-content a:hover {
background-color: #e6e6e6;
color: #333333;
}
.dropdown:hover .dropdown-content {
display: block;
}

<div class="header">
<ul class="drop_menu">
<li class="dropdown">
<a href='#' class="dropbtn">Products</a>
<div class="dropdown-content">
<a href='auto_tender_commercial.html'>Link 1</a>
<a href='fruit_series.html'>Link 2</a>
<a href='smart_sensors.html'>Link 3</a>
</div>
</li>
<li class="dropdown">
<a href='#' class="dropbtn">Bar Service Packages</a>
<div class="dropdown-content">
<a href='what_is_it.html'>Really long long long long long long long link</a>
<a href='what_is_it.html'>Link 4</a>
<a href='leasing_plan.html'>Link 5</a>
</div>
</li>
<li><a href='event_leasing.html'>Event Leasing</a></li>
</ul>
</div>

JSFiddle 视图

Answer 1

在评论中，有人建议jQuery可以是一个选项。

$(".dropdown-content").each(function() {
$(this).css({
'left' : '50%',
'margin-left' : $(this).width() / 2 * - 1 + 'px'
});
});

这是我的Fiddle：https://jsfiddle.net/pg60qetq/3/

我不得不稍微修改一下CSS。我将位置从DIV更改为UL，删除了一些有问题的高度和溢出属性。

希望这能有所帮助。

Answer 2

好的，所以你的父元素是固定宽度的，子元素比父元素大，最小宽度：150px。父母应该以孩子为中心。

当前的问题是，您的子元素处于绝对位置，因此它们不会占用父元素内部的空间。所以你的父元素不知道孩子有多大，中心必须在哪里。

为了确保你的父母知道孩子的中心在哪里，孩子们必须有一些显示：设置而不是"无"，因为这会使他们不占用空间，而且他们必须相对定位。由于我们仍然希望元素在不悬停时隐藏，我们将给它一个0的高度和visiblity:hidden；

li.dropdown {
display: inline-block;
text-align: center;
}
.dropdown-content {
visibility: hidden;
height: 0;
position: relative;
min-width: 160px;
text-align: center;
}
.dropdown:hover .dropdown-content {
visibility: visible;
height: auto;
}

我将您的测试用例简化为一个下拉列表：

https://jsfiddle.net/pg60qetq/1/

这样一来，父母将占据与悬停时一样多的空间。

以下是包含所有三个下拉项的版本：https://jsfiddle.net/pg60qetq/2/现在，由于父元素实际上更大，因此这些元素包裹在一个小显示屏上。