如何在CSS的li中水平居中放置div

Marco 发表于 Dev

104

马可

我有一个非常简单的下拉菜单，如下所示：

<ul class="nav multilevel">
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><span>item 3 +</span>
        <div class="cntLevel level">
            <ul>
                <li><a href="#">short item 1</a></li>
                <li><a href="#">very long menu item 2</a></li>
                <li><a href="#">medium menu item</a></li>
            </ul>
        </div>
    </li>
</ul>

使用以下CSS：

ul {margin:0; padding: 0; list-style: none;}

.nav {
    background-color: #aaa;
    text-align: center;
}

.nav > li {
    position: relative;
    display: inline-block;
    padding: 30px;
}

.nav > li:hover {
    background-color: #ececec;
}

.nav > li > a, .nav > li > span {
    font-size: 20px; color: #333; text-decoration: none;
    cursor: pointer;
}

.multilevel .cntLevel {
    display: block;
    position: absolute;
    right: 0; top: 83px;
    z-index: 100;
}

.cntLevel {
    padding: 5px 0;
    background-color: rgba(40, 40, 40, 1);
}

.level li {
    white-space: nowrap;
}

.level li a {
    display: block;
    padding: 5px 20px;
    color: #a6a6a6;
    text-align: left; text-decoration: none;
}

.level li a:hover {
    color: red;
}

一切正常！这是jsfiddle的证明：

https://jsfiddle.net/jq2ub0jr/1/

所以有什么问题。这里是：

我想将子菜单（下拉菜单）居中到<li>（列表项）。现在，它是正确对齐的。我可以通过声明一个固定的宽度和一个负的margin-left宽度为left属性来实现它。但是，我绝对不想添加固定宽度。

如何在下拉菜单中居中<li>？

谢谢

迈克尔·本杰明（Michael Benjamin）

您的容器（li）相对放置。

您的子菜单div（的子级li）是绝对定位的。

要使子菜单居中，您只需添加...

left: 50%;
transform: translate(-50%, 0);

...到子菜单div。

然后，您需要一个宽度。但是，您不需要固定的宽度。因此，添加最小宽度：

min-width: 200px;

因此，样式规则变为：

.multilevel .cntLevel {
    display: block;
    position: absolute;
    /* right: 0; remove this */
    top: 83px;
    z-index: 100;

    /* NEW */
    left: 50%;
    transform: translate(-50%, 0);
    min-width: 200px;
    }

子菜单现在居中，并且将以更长的文本扩展。

演示：https : //jsfiddle.net/jq2ub0jr/6/

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。