Question

尝试在图像上放置水平菜单。

我现在已将它放在图像上，但我似乎无法将li元素置于屏幕中间。

这是HTML：

<div id="banner">
    <img src="security-people-interior.jpg"/>            
</div>
<div id="menu-outer">
    <div id="menu">
        <ul id="horizontal-list">
            <li><a href="#">About</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Monitoring</a></li>
            <li><a href="#">Testimonials</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</div>

CSS3：

#banner {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img, #banner {
    width: 100%;
}

#menu-outer {
    background: url(images/bar-bg.jpg) repeat-x;
    z-index: 100;
    position: absolute;
    top: 25%;
    width: 100%;
}

#menu {
    ????
}

ul#horizontal-list {
    /*list-style: none;*/;
}

ul#horizontal-list li {
    display: inline;
}

#menu a {
    text-decoration: none;
    margin: 10px;
    float: left;
    color: black;
    padding: 2px 5px;
    text-align: center;
    white-space: nowrap;
}

#menu a:hover {
    color: #fff;
    background: red;
}

我唯一可以使用的是在CSS中的#menu {}浮动，但很明显浮动并没有居中。

CSS3并不是我特别喜欢的，所以任何帮助都会非常感谢。

Answer 1

以下是两个选项：

将display元素的#horizontal-list设置为inline-block，然后在父元素上使用text-align: center以使其居中。

Example Here
```
#menu {
    text-align: center;
}
#horizontal-list {
    display: inline-block;
}
```

或者，使用flexboxes：

Example Here

#menu {
    display: flex;
    justify-content: center;
}

将一个绝对位置div标记的子项居中

1 个答案: