是否有可能将一个比它的父元素更宽的元素居中并且没有Javascript就绝对定位?

时间:2015-09-04 13:29:08

标签: javascript jquery html css

BASE HTML / CSS - JSFiddle https://jsfiddle.net/tae8pc1g/2/

所有的标题都是真的。 JSFiddle中的所有重要代码如下:

<div class="example-button">Menu Button
    <ul class="example-menu">
        <li>This is</li>
        <li>some example</li>
        <li>dynamic</li>
        <li>content</li>
    </ul>
</div>

CSS

.example-button {
    position: relative;
    display: inline-block;
}

.example-menu {
    position: absolute;
    display: inline-block;
    top: 100%;
}

使用HTML&amp;仅限CSS,是否可以将.example-menu相对于.example-button的宽度居中,即使它比.example-button宽?

2 个答案:

答案 0 :(得分:7)

是的,可以使用:

1 - 对于未知宽度:

left: 50%;
transform: translateX(-50%);

2 - 对于已知宽度:

left: 50%;
margin-left: -(width/2)

这是一个与

一起工作的JSFiddle

body {
    text-align: center;
}

.example-button {
    position: relative;
    padding: 15px;
    border-radius: 5px;
    background: gray;
    display: inline-block;
    text-align: left;
}

.example-menu {
    position: absolute;
    display: inline-block;
    top: 100%;
    background: blue;
    margin:0;
    padding: 10px 70px;
    list-style: none;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
<div class="example-button">Menu Button
    <ul class="example-menu">
        <li>Please</li>
        <li>center</li>
        <li>me!</li>
    </ul>
</div>

答案 1 :(得分:1)

它可能被认为是一个黑客,但使用纯CSS你可以把它放在你的示例按钮类:

left: 50%;
transform: translateX(-50%);

请参阅https://jsfiddle.net/08fqfhum/

注意:这不适用于旧浏览器(IE8),因为它使用CSS转换。对于像Safari这样的浏览器,您还需要添加转换属性的前缀版本:

-webkit-transform: translateX(-50%);