下拉菜单不在按钮下方居中的 HTML/CSS 问题答案

【问题标题】：HTML/CSS problem with the dropdown menu not being centered under the button下拉菜单不在按钮下方居中的 HTML/CSS 问题
【发布时间】：2021-08-23 15:51:30
【问题描述】：

我正在尝试使菜单在按钮下方居中。目前，它是左对齐的。

代码如下：

.role_select {
    margin: auto;
}

#role_select > div {
    margin-top: 5%;
}

ul[aria-labelledby="dropdownMenuButton1"] > li {
    text-align: center;
}

ul[aria-labelledby="dropdownMenuButton1"] {
    border: 2px solid red;
}

<div class="role_select">
            <button
                class="btn btn-secondary dropdown-toggle"
                type="button"
                id="dropdownMenuButton1"
                data-bs-toggle="dropdown"
                aria-expanded="false"
            >
                Select Role
            </button>

            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                <li @click="id_drop(0)">MT-Almighty</li>
                <li @click="id_drop(1)">ST-Almighty</li>
            </ul>
</div>

我见过下拉菜单-右键之类的，但似乎没有一个用于中间或中心的。

【问题讨论】：

现在你有 13 个代表了。您可以发布图片。
@Someone_who_likes_SE，谢谢，但我仍然无法添加它。我尝试使用“链接图像”选项，但服务器出现错误。

标签： html css bootstrap-4

【解决方案1】：

您可以使用margin left/right 属性来居中对齐下拉菜单

或

您可以像这样使用块方法：

<div class="role_select">
            <button class="btn btn-secondary dropdown-toggle">
                Select Role
            </button>

            <ul class="dropdown-menu">
                <li>MT-Almighty</li>
                <li>ST-Almighty</li>
            </ul>
</div>

为class="role_select" 定义一个宽度，以便class="dropdown-menu" 可以轻松进入其中并将btn-secondary dropdown-menu 两个类的显示属性都定义为display:block。然后你可以像这样使用margin-left:auto;margin-right:auto;text-align:center 居中对齐：

.role{
  width:10%;/*20%,100px,....your wish so thatdropdown can eassily come */
}
.dropdown-menu{
  display:block;
  margin-left:auto;
  margin-right:auto;
  text-align:center
}
.btn-secondary{
  display:block;
  margin-left:auto;
  margin-right:auto;
  text-align:center
}

【讨论】：

没用。这是它的样子：imgur.com/a/vx4lbX9。我提到左边距/右边距不适用于 ul 标签，这是错位的原因。

【解决方案2】：

原来我在寻找错误的东西。

position dropdown button and dropdown menu in center?

我在 ul 标记中添加了一个新类来解决它。

由于某种原因，由于百分比的变化导致菜单低于屏幕变窄时应有的水平，因此必须用像素来观察顶部边缘。

    .dropdown-menu-center {
        left: 50% !important;
        right: auto !important;
        margin-top: 68px !important;
        text-align: center !important;
        transform: translateX(-50%) !important;
        position: fixed !important;
    }
'''

【讨论】：