中心绝对定位的子元素

我需要水平居中嵌入块的子元素。问题是子子菜单是可变宽度，可以比其父母宽。我最初的解决方案是将子元素设置为左侧&右侧-50px，但这不是一个真正的可变宽度，而是静态设置为比其父元素宽100px。中心绝对定位的子元素

.main-menu { 
 
    text-align: left; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 0px; 
 
    font-size: 0rem; 
 
} 
 
.main-menu li { 
 
    font-size: 18px; 
 
    font-size: 1.8rem; 
 
    line-height: 1em; 
 
    list-style-type: none; 
 
    text-align: center; 
 
    display: inline-block; 
 
    zoom: 1; 
 
    padding: 0 25px; 
 
    position: relative; 
 
} 
 
li > a { 
 
    display: inline-block; 
 
    zoom: 1; 
 
    padding: 21px 0 19px; 
 
    font-family: "Open Sans", sans-serif; 
 
    font-weight: 400; 
 
    color: #282828; 
 
    font-size: 16px; 
 
    font-size: 1.6rem; 
 
    line-height: 1.2em; 
 
    text-decoration: none; 
 
    -webkit-transition: all .25s ease-in-out, background-image 0s, background-position 0s; 
 
    transition: all .25s ease-in-out, background-image 0s, background-position 0s; 
 
} 
 
.sub-menu { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: -50px; 
 
    right: -50px; 
 
    max-width: 250px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-bottom: 0; 
 
    min-width: 150px; 
 
    background-color: white; 
 
    text-align: left; 
 
    padding: 17px 0; 
 
    box-shadow: 0 2px 5px #dcdcdc inset; 
 
    border-top: 18px solid #ffdd00; 
 
    }

<ul class="main-menu clearfix"><li id="menu-item-657" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children first menu-item-657"> 
 
<li id="menu-item-657" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children first menu-item-657"><a href="link">Solutions</a> 
 
<ul class="sub-menu"> 
 
\t <li id="menu-item-220469" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-220469"><a href="link">Solutions</a></li> 
 
\t <li id="menu-item-18009" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18009"><a href="link">How It Works</a></li> 
 
\t <li id="menu-item-10344" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10344"><a href="link">Why Use It</a></li> 
 
\t <li id="menu-item-3375" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3375"><a href="link">Products</a></li> 
 
</ul> 
 
</li> 
 
</ul>

来源

2016-09-12 Daniel Benzie

'的text-align：center'，而不是'left'为'子menu'为你的作品？ – kukkuz

这就是我通常这种情况做：

.parent { 
 
    /*....your existing css...*/ 
 
    position: relative; 
 
} 
 
.sub-menu { 
 
    display: block; 
 
    left: 50%; 
 
    text-align: center; 
 
    position: absolute; 
 
    transform: translateX(-50%); 
 
}

<div class="parent"> 
 
    <div class="sub-menu"> 
 
    Centered 
 
    </div> 
 
</div>

来源

2016-09-12 12:48:03

真棒，工作一个治疗:)谢谢！ –

我上周就遇到了这个问题，这样的固定我的问题：

li > a { 
    ....your existing css... 
    position: relative; 
} 
.sub-menu { 
    display: block; 
    left: 0; 
    right: 0; 
    text-align: center; 
    position: absolute; 
    margin-left: -100%; 
    margin-right: -100%; 
}

在我的情况，.sub-menu比li > a更宽，但我想.sub-menu到集中在li > a之下。这是你遇到的问题吗？

来源

2016-09-12 12:40:02

嘿 - 感谢您花时间回答，是的，这是我遇到的问题，但不幸的是上述不会工作，这是因为底部的菜单是不是真正的动态宽度，但仍然基于它的父母和一些较小的子菜单结束太宽：（ –

中心绝对定位的子元素

回答

相关问题