Question

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宽？

Answer 1

是的，可以使用：

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>

Answer 2

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

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

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

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

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

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

2 个答案: