页脚菜单未居中对齐答案

【问题标题】：footer menu not center aligned页脚菜单未居中对齐
【发布时间】：2017-02-28 02:24:38
【问题描述】：

我的页脚分为 2 行，即 footer-top 和 footer-bottom。

footer-top 的文本完全居中对齐。然而，footer-bottom 的菜单不是居中对齐的。

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

【问题讨论】：

看看这个页面，它可能会帮助css-tricks.com/… :) 祝你好运！编辑：可能重复：stackoverflow.com/questions/8641251/…

标签： css

【解决方案1】：

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

【讨论】：

但即使在此页脚菜单中也不是居中对齐
是的，我很确定它是居中的 :)

【解决方案2】：

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

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】：

您需要更改页脚菜单 css

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

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

【讨论】：

我将添加更多的 li 项目，所以我不想将宽度固定为 266 像素......还有其他方式吗？
您可以在 ul 中使用中心标签：<ul class="footermenu"> <center> <li><a href="#">LEGAL</a></li> <li><a href="#">PRIVACY</a></li> <li><a href="#">COPYRIGHT</a></li> </center> </ul>