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

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

我已经试过设置

margin:auto或设置<代码>左侧：-50%；右图：-50%

以及我在网上找到的其他解决方案，但对我来说似乎没有任何效果

我怎样才能做到这一点

.header{
/*背景图像：url（“../images/top_menu.png”）*/
宽度：100%；
背景重复：无重复；
背景位置：左上；
背景附件：固定；
位置：固定；
排名：0；
背景来源：边框框；
高度：68px；
}
保险商实验室{
列表样式类型：无；
保证金：0；
左：5%；
填充顶部：15px；
垫底：10px；
溢出：隐藏；
显示：内联块；
}
李{
浮动：左；
}
李a,，
.dropbtn{
显示：内联块；
颜色：#000；
文本对齐：居中；
填充：8px 10px；
文字装饰：无；
背景色：#fff；
保证金：5px；
边界半径：30px；
最小宽度：160px；
}
李a：悬停，
.dropdown:悬停.dropbtn{
背景色：黑色；
颜色：白色；
}
li.下拉列表{
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
最小宽度：160px；
文本对齐：居中；
}
.下拉内容a{
颜色：#E6；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：居中；
背景色：#333333；
}
.下拉列表内容a：悬停{
背景色：#e6；
颜色：#333333；
}
.下拉：悬停.下拉内容{
显示：块；
}

好的，所以父元素的宽度是固定的，子元素比父元素大，最小宽度：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;
}

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

这样一来，父母将占据尽可能多的空间，因为他们会盘旋虽然

以下是包含所有三个下拉列表的版本：

---

现在，由于父元素实际上更大了，所以这些元素被包装在一个小屏幕上。

在注释中，有人建议jQuery可以作为一个选项

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

这是我的小提琴：

我不得不稍微修改CSS。我将位置从

DIV

更改为

UL

，删除了一些有问题的高度和溢出属性

---

希望这有帮助。

这是因为父元素比子元素小。还是我误解了你？是的。父元素的宽度较小。因此，如果子元素居中，则父元素之间会有一些空间？会有一些空间，但这并不重要，因为在下拉列表中，不能同时选择两个父元素。然后，您应该只需要文本对齐：居中；