页脚菜单未居中对齐 [英] footer menu not center aligned

问题描述

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

I have a footer divided into 2 rows, i.e footer-top and footer-bottom.

页脚顶部具有完全对齐的文本。

footer-top has text which aligns in center perfectly. However footer-bottom has menu which is not center-aligned.

我的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

推荐答案

尝试此操作，看看它是否适用于您：

Try this and see if it works for you:

演示小提琴

Demo Fiddle

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

I agree with the other answers that you should use inline-block, but to do so you'll need to comment out the float entries, and rely on text-align: center.

CSS，我已经排除了你可能不需要的样式：

CSS, I've gone ahead and commented out the styles you probably don't need:

/* 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;
}

这篇关于页脚菜单未居中对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！