css - 删除左右两侧的页脚空白
问题描述
我正在尝试删除页脚左右两侧的空白,当我输入代码“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, 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-center,
.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;
}
}
解决方案
Use flexbox. All the elements within your footer will automatically center within the parent.
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%;
}
推荐阅读
- c++ - 如何清除 struct 中的填充字节以进行比较?
- python - 如何在 pyspark 中启用 csv 文件的多行读取
- python - 循环通过 json jinja2 python
- java - 如何解决 Proguard 问题 - ArrayIndexOutOfBoundsException?
- python - 如何使用 Python 计算这个 CRC?
- javascript - ReactJS - 道具命名的首选约定
- javascript - 无法访问 Javascript 属性
- javascript - SyntaxError:意外的令牌>
- android - 加载包含 Web 视图的选定选项卡
- java - Java 调用 groovy 脚本(带评估)并返回错误