html - Css div 边距和中心

Question

我想将所有内容都集中在我的代码上，但我尝试了一些方法，它仍然留在左侧，所以我知道它来自 float:left

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

cizgi 颜色必须是白色，但我将其设为黑色以便于显示。

它必须看起来像这样:

我的代码:

.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;
}

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

Answer 1

居中:

• 从 .social 中删除 float:left 并将 width 从 600px 减少到最大 宽度 将具有:220px

要有这些边框的背景:

• 添加一个父类(我命名为bg)给它background color和padding
• 将您的社交元素从 float:left 更改为 display:inline-block
• 将 margin 顶部/底部添加到您的 .cizgi

.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;
}

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