css - 需要一些帮助让我的 DIV 居中

Question

我有以下代码:

<div id="ftr_btm">
        <div id="ftr_ctr">
            <div class="hdr_lnk">
                <ul>
                <li><a>Test1</a></li>
                <li><a>Test2</a></li>
                <li><a>Test3</a></li>
                </ul>
            </div>
        </div>
    </div>

和以下 CSS:

#ftr_ctr {display: block; text-align: center; font-size:0.8em; position: absolute; height: 24px;margin: auto;}
.hdr_lnk ul li {
    display: inline;
    float: left;
    padding: 0;
    position: relative;
}

我想要做的是让文本(地址链接)水平居中显示，并且 UL 的每一侧都有边距。它不起作用，文本和 UL 都向左移动，如下所示:

fiddle

有谁能告诉我如何让 UL 出现在页面中间。

谢谢

Answer 1

我不太确定您将代码放入其中的上下文，但这应该可以达到您想要的效果:

#ftr_ctr {
    width: 100%; 
    text-align: center; 
    font-size:0.8em;
    position: absolute;
    height: 24px;
}

.hdr_lnk ul{
    margin: auto;
}

.hdr_lnk li {
    display: inline;
    padding: 0;
}

您需要的主要内容是 #ftr_ctr 元素中的 width: 100%; 规则和 margin: auto; 规则.hdr_lnk ul 规则。 (宽度不必为 100%，但需要设置为阻止元素收缩包裹其内容)。 margin: auto; 将内容垂直或水平居中，或者 margin: 0 auto; 将内容水平居中。