将元素居中放置在固定元素内

Question

我在将一个元素置于固定位置的父元素中央时遇到了问题：

bottombanner 位于 html body 中：

<div id="bottombanner">
<div>
    <ul>
        <li><a href="contact.html">ContactUs</a></li>
        <li><a href="about.html">AboutUs</a></li>
        <li><a href="help.html">Help</a></li>
        <li><a href="bugs.html">BugReportBox</a></li>
        <li><a href="suggestions.html">SuggestionBox</a></li>
    </ul>
</div>
</div>

CSS已经正确链接：

    #bottombanner{
    position:fixed;
    width:100%;
    bottom:0;
    }

    #bottombanner > div {
    position:absolute;
    width:100%;
    }

    #bottombanner > div > ul {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    -webkit-margin-start: auto;
    -webkit-margin-end: auto;
    -webkit-padding-start: 0;
    }

- Justin McDonald

---

你能创建一个jsfiddle或类似的东西吗？这样我们就可以更好地了解你是如何实现这个功能的。 - Josh Davenport-Smith

你要应用这个HTML到哪里？ - j08691

Answer 1

为#bottombanner添加高度（至少在我的fiddle中是必要的），并为#bottombanner > div添加text-align: center：

#bottombanner{
    position:fixed;
    width:100%;
    bottom:0;
    height: 130px;
}

#bottombanner > div {
    position:absolute;
    width:100%;
    text-align:center;
}

#bottombanner > div > ul {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    -webkit-margin-start: auto;
    -webkit-margin-end: auto;
    -webkit-padding-start: 0;
}

Fiddle: http://jsfiddle.net/kboucher/cFgNx/

- Kevin Boucher

---

将 height: 100%; 添加到 fixed 元素中对我很有帮助。谢谢 Kevin。 - Marcel Grolms

Answer 2

您需要将居中元素的display属性设置为block，并设置元素的宽度。

#bottombanner > div > ul {
 position:relative;
 margin-left:auto;
 margin-right:auto;
 -webkit-margin-start: auto;
 -webkit-margin-end: auto;
 -webkit-padding-start: 0;
 display:block;
 width:200px;
}

- b_m

---

这个在我固定宽度时是有效的，有没有一种方法可以使用width:auto来实现？ - Justin McDonald

默认情况下，ul的宽度为100％，因此宽度自动为100％。如果您希望列表收缩到最小尺寸，则需要进行一些操作，例如使用float:left或display:inline-block来缩小它（但我不确定哪个是正确的）。 - coopersita