Css 页脚菜单未居中对齐
我有一个页脚分为两行,即页脚顶部和页脚底部 页脚顶部有文本,完全居中对齐。但是,页脚底部的菜单未居中对齐 我的html:Css 页脚菜单未居中对齐,css,Css,我有一个页脚分为两行,即页脚顶部和页脚底部 页脚顶部有文本,完全居中对齐。但是,页脚底部的菜单未居中对齐 我的html: <div class="page-wrap"> <footer> <div class="footer-top"> Copyright </div> <div class="footer-bottom"> <
<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
.footermenu {
text-decoration: none;
width: 266px;
margin: 0 auto;
text-align: center;
}
小提琴:您应该将
显示:内联块
添加到.footer菜单
试试这个,看看它是否适合你: 我同意其他答案,即您应该使用
内联块
,但要这样做,您需要注释掉浮动
条目,并依赖文本对齐:居中
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;
}
看看这一页,可能会有帮助:)祝你好运!编辑:可能重复:我将向其添加更多li项目,因此我不想将宽度固定为266px…任何其他方式?您可以在ul中使用中心标记: