无法将位置“绝对”的div居中在位置“相对”的父div内

时间:2019-09-17 15:46:45

标签: html css

我正在尝试创建一个自定义下拉菜单,并希望将下拉菜单居中放置触发它的文本。

这是我的HTML。

<div class="dropdown-container">
  <span>del</span> 
  <div class="dropdown">
    <span class="fas fa-sort-up fa-lg dropdown-arrow">^</span> 
    <div class="dropdown-options">
      <div class="dropdown-item">Are you sure?</div> 
      <div class="dropdown-item">Yes</div>
      <div class="dropdown-item">No</div>
    </div>
  </div>
</div>

这是我的CSS:

.dropdown-container{
      position: relative;
}

.dropdown {
    position: absolute;
    border: 1px solid black;
    z-index: 1;
    margin-top: 7px;
    background-color: white;
    width: max-content;
}

.dropdown-arrow {
    position: absolute;
    right: 50%;
    top: -5px;
}

我无法将dropdown的div居中放在<span>del</span>的中心。如果我尝试使用px居中,则span标签包含长度不同的单词时,它会偏移。例如:“删除”。

0 个答案:

没有答案