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

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>

View on JSFiddle

Answer 1

OK，所以你的parent是固定宽度的，children比parent元素大，也是min-width:150px。 parent 应该以 child.

为中心

当前的问题是您的 children 是绝对定位的，因此它们不会消耗 parent 元素内的 space。所以你的 parent 元素不知道 children 有多大，也不知道中心在哪里。

为了确保您的 parent 知道 children 的中心位置，children 必须有一些显示："none" 以外的设置，因为这使得它们不占用 space，并且它们必须相对定位。由于我们仍然希望元素在未悬停时隐藏，因此我们将其高度设置为 0 并设置可见性：隐藏；

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;
}

我将您的 test-case 缩减为一个下拉菜单：

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

这样，parent 将占用与悬停时一样多的 space。

这是包含所有三个下拉菜单的版本： https://jsfiddle.net/pg60qetq/2/ 现在，由于 parent 实际上更大了，因此元素会在较小的显示屏上环绕。

Answer 2

在评论中有人建议 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，删除了一些有问题的高度和溢出属性。

希望对您有所帮助。

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

How to center sub-item of drop-down menu to parent?

html

css

drop-down-menu

parent-child

center-align