Css div边距和中心

Question

我希望将所有内容集中在我的代码上，但我尝试了一些事情并且它的静止图像仍在左侧，所以我知道它来自float:left

关于cizgi样式，当我不放float:left时，它们看起来重叠而不是分开。

cizgi颜色必须是白色但我将其设为黑色以便更容易显示。

它看起来像这样：

我的代码：

＆＃13;

＆＃13;

.cizgi {
  min-height: 10px;
  background-color: #000000;
  width: 600px;
  margin: 0px auto;
  float: left;
}
.social {
  width: 600px;
  margin: 0px auto;
  float: left;
}
.twitter {
  background: url('http://i.imgur.com/Tdon7vV.png') no-repeat 0 -2px;
  width: 43px;
  height: 43px;
  float: left;
}
.facebook {
  background: url('http://i.imgur.com/Tdon7vV.png') no-repeat -55px -2px;
  width: 43px;
  height: 44px;
  float: left;
}
.instagram {
  background: url('http://i.imgur.com/Tdon7vV.png') no-repeat -105px 0;
  width: 46px;
  height: 45px;
  float: left;
}
.pinter {
  background: url('http://i.imgur.com/Tdon7vV.png') no-repeat -160px 0;
  width: 43px;
  height: 44px;
  float: left;
}
.posta {
  background: url('http://i.imgur.com/Tdon7vV.png') no-repeat -212px -1px;
  width: 43px;
  height: 43px;
  float: left;
}

＆＃13;

<div class="cizgi"></div>
<div class="social">
  <div class="twitter"></div>
  <div class="facebook"></div>
  <div class="instagram"></div>
  <div class="pinter"></div>
  <div class="posta"></div>
</div>
<div class="cizgi"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

居中：

• 从float:left移除.social，将width从600px缩减到最大width，其中包含：220px

要使背景具有这些边框：

• 添加一个父类（我名为bg），为其提供background color和padding
• 将您的社交项目从float:left更改为display:inline-block
• 将margin顶部/底部添加到.cizgi

＆＃13;

＆＃13;

.bg {
  background: lightgray;
  padding: 5px 0
}
.cizgi {
  min-height: 10px;
  background-color: white;
  width: 600px;
  margin: 5px auto;
}
.social {
  width: 220px;
  margin: 0 auto;
  font-size: 0
}
.social > div {
  display: inline-block
}
.twitter {
  background: url('http://i.imgur.com/Tdon7vV.png') no-repeat 0 -2px;
  width: 43px;
  height: 43px;
}
.facebook {
  background: url('http://i.imgur.com/Tdon7vV.png') no-repeat -55px -2px;
  width: 43px;
  height: 44px;
}
.instagram {
  background: url('http://i.imgur.com/Tdon7vV.png') no-repeat -105px 0;
  width: 46px;
  height: 45px;
}
.pinter {
  background: url('http://i.imgur.com/Tdon7vV.png') no-repeat -160px 0;
  width: 43px;
  height: 44px;
}
.posta {
  background: url('http://i.imgur.com/Tdon7vV.png') no-repeat -212px -1px;
  width: 43px;
  height: 43px;
}

＆＃13;

<div class="bg">
  <div class="cizgi"></div>
  <div class="social">
    <div class="twitter"></div>
    <div class="facebook"></div>
    <div class="instagram"></div>
    <div class="pinter"></div>
    <div class="posta"></div>
  </div>
  <div class="cizgi"></div>
</div>

＆＃13;

＆＃13;

＆＃13;