Question

我有一个分为2行的页脚，即页脚顶部和页脚底部。

页脚顶部有完全对齐的文字。但是，页脚底部的菜单不是中心对齐的。

我的HTML：

<div class="page-wrap"> 
    <footer>
        <div class="footer-top">
            Copyright
        </div>
        <div class="footer-bottom">
            <ul class="footermenu">
                <li><a href="#">LEGAL</a></li>
                <li><a href="#">PRIVACY</a></li>
                <li><a href="#">COPYRIGHT</a></li>
            </ul>
        </div>
    </footer>
 </div>

我的css：

.page-wrap {
    width: 100%;
    height: 100%;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}

footer {
    width: 100%;
    background-color: #8DC63F;
    display: block;
    float: left;
    clear: both;
    text-align:center;
}

.footer-top { width: 100%; float: left;padding-top:10px; color: #FFFFFF;}

.footer-bottom {
    width: 100%;
    text-align: center;
    float: left;
    display: inline-block;
}

.footermenu a {
    color: #FFFFFF;
    float: left;
    font-size: medium;
    list-style-type: none;
    text-decoration: none;
    padding-left: 10px;
    padding-right: 10px;
}

.footermenu li {
    width: auto;
    float: left;
    text-align: center;
    list-style-type: none;
    text-decoration: none;
}
.footermenu {
    text-decoration: none;
    width: auto;
    text-align: center;
}

这是

DEMO

Answer 1

您应该将display: inline-block添加到.footermenu
Example...

Answer 2

您需要更改页脚菜单css

.footermenu {
    text-decoration: none;
    width: 266px;
    margin: 0 auto;
    text-align: center;
}

小提琴：http://jsfiddle.net/dT6sC/4/

Answer 3

试试这个，看看它是否适合你：

<强> Demo Fiddle

我同意您应该使用inline-block的其他答案，但为此您需要注释掉float条目，并依赖text-align: center。

CSS，我已经开始并评论了你可能不需要的款式：

/* new css */
.footermenu li {
    display: inline-block;
    margin-bottom: 10px;
}

/* old css */
.page-wrap {
    width: 100%;
    height: 100%;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}

footer {
    //width: 100%;
    background-color: #8DC63F;
    //display: block;
    //float: left;
    clear: both;
    text-align:center;
}

.footer-top { 
    //width: 100%; 
    //float: left;
    padding-top:10px; 
    color: #FFFFFF;
}

.footer-bottom {
    width: 100%;
    //text-align: center;
    //float: left;
    //display: inline-block;
}

.footermenu a {
    color: #FFFFFF;
    //float: left;
    font-size: medium;
    //list-style-type: none;
    text-decoration: none;
    padding-left: 10px;
    padding-right: 10px;
}

.footermenu li {
    //width: auto;
    //float: left;
    //text-align: center;
    list-style-type: none;
    //text-decoration: none;
}
.footermenu {
    //text-decoration: none;
    //width: auto;
    //text-align: center;
}

页脚菜单不对齐中心

3 个答案: