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

时间:2011-08-21 14:18:15

标签: css

我有以下代码:

<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出现在页面中间。

感谢

1 个答案:

答案 0 :(得分:0)

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

#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;
}

您需要的主要内容是width: 100%;元素中的#ftr_ctr规则和margin: auto;规则中的.hdr_lnk ul规则。 (宽度不必是100%,但需要将其设置为停止元素 shrink-wrapping 其内容)。 margin: auto;会将内容纵向或横向居中,或margin: 0 auto;将内容水平居中。