如何解决去除左右两边的页脚空白
我正在尝试删除页脚右侧和左侧的空白区域,当我输入代码“max-width: 1200px; margin: auto;”时,它一直存在使内容居中。还有什么方法可以让内容居中同时去除两边的白边?
我尝试使用 margin-top、margin-left、margin-right、bootstrap 的 pull-left 和 pull-right,margin 和 padding 设置为 0,width:100% 等等。没有任何效果。
谢谢。
我的代码是这样的:
body {
margin-left: 0;
padding: 0;
}
footer{
position: relative;
bottom: 0;
max-width: 1200px;
margin: auto;
overflow-x: hidden;
}
.footer-distributed{
background-color: #2c2c2c;
box-shadow: 0 1px 1px 0 rgba(0,0.12);
width: 100%;
text-align: left;
font: normal 16px 'Varela Round';
padding: 20px 50px;
margin-top: 10px;
}
.footer-distributed .footer-left,.footer-distributed .footer-center,.footer-distributed .footer-right,.mapouter .gmap_canvas{
display: inline-block;
vertical-align: top;
}
.footer-distributed .footer-left{
width: 40%;
}
.footer-distributed h3{
color: #ffffff;
font: normal 36px 'Varela Round',cursive;
margin: 0;
}
.footer-distributed h3 span{
color: #ffffff;
}
.footer-distributed .footer-links{
color: #ffffff;
margin: 20px 0 12px;
padding: 0;
}
.footer-distributed .footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}
.footer-distributed .footer-company-name{
color: #8f9296;
font-size: 14px;
font-weight: normal;
margin: 0;
}
.footer-distributed .footer-center{
width: 35%;
padding-top:18px;
}
.footer-distributed .footer-center i{
background-color: #33383b;
color: #ffffff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}
.footer-distributed .footer-center i.fa-envelope{
font-size: 17px;
line-height: 38px;
}
.footer-distributed .footer-center p{
display: inline-block;
color: #ffffff;
vertical-align: middle;
margin:0;
}
.footer-distributed .footer-center p span{
display:block;
font-weight: normal;
font-size:14px;
line-height:2;
}
.footer-distributed .footer-center p a{
color: #cd2030;
text-decoration: none;
}
.footer-distributed .footer-right{
width: 20%;
padding-top:18px;
}
.footer-distributed .footer-company-about{
line-height: 20px;
color: #92999f;
font-size: 13px;
font-weight: normal;
margin: 0;
}
.footer-distributed .footer-company-about span{
display: block;
color: #ffffff;
font-size: 17px;
font-weight: normal;
margin-bottom: 20px;
}
.footer-distributed .footer-icons{
margin-top: 25px;
}
.footer-distributed .footer-icons a{
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-right: 3px;
margin-bottom: 5px;
}
@media (max-width: 880px) {
.footer-distributed{
font: bold 14px 'varela round';
}
.copyright-info,.credit {
width: 100%;
text-align: center;
display: block;
vertical-align: middle;
margin-left: 0px;
margin-right: 0px;
}
.footer-distributed .footer-left,.footer-distributed .footer-right{
display: block;
width: 100%;
margin-bottom: 40px;
text-align: center;
}
.footer-distributed .footer-center i{
margin-left: 0;
}
.main {
line-height: normal;
font-size: auto;
}
}
解决方法
使用flexbox。页脚中的所有元素都将自动居中。
footer {
background-color: #2c2c2c;
position: relative;
bottom: 0;
left: 0;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
.footer-distributed {
padding: 1em;
display: flex;
align-items: flex-start;
justify-content: center;
max-width: 1200px;
width: 100%;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。