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

Posted 2023-03-05

【中文标题】如何将下拉菜单的子项居中到父项？

【英文标题】：How to center sub-item of drop-down menu to parent?

【发布时间】：2017-05-31 14:54:25

【问题描述】：

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

我已经尝试设置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

【问题讨论】：

那是因为你的父元素比子元素小。还是我误会了？

是的。父元素的宽度更小。

那么如果孩子们居中，父母之间会有一些空间吗？

会有一些空间，但这并不重要，因为在下拉列表中不能同时选择两个父母。

那你应该只需要 text-align: center;

【参考方案1】：

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

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

这是我的小提琴：https://jsfiddle.net/pg60qetq/3/

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

希望这会有所帮助。

【参考方案2】：

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

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

为了确保您的父母知道孩子的中心在哪里，孩子必须有一些显示：设置不是“无”，因为这会使它们不占用空间，并且它们必须相对定位。由于我们仍然希望元素在未悬停时隐藏，因此我们将其高度设置为 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;

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

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

这样，父母在悬停时会占用尽可能多的空间。

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