Question

我有一个问题，在外部div中居.social divs。我正在寻找答案，但我找不到有效的解决方案。这是HTML：

<div class="socials">
  <div class="social">
    <img src="images/fb.png">
  </div>
  <div class="social">
    <img src="images/insta.png">
  </div>
  <div class="social">
    <img src="images/tt.png">
  </div>
  <div class="social">
    <img src="images/snap.png">
  </div>
</div>

和CSS：

.social {
  width: 25px;
  height: 25px;
  float: left;
  cursor: pointer;
}

我想.social divs彼此相邻，并以.socials div为中心。

Answer 1

这应该有所帮助，试一试。

.social {
  width: 25px;
  height: 25px;
  float: left;
  cursor: pointer;
  display: table-cell;
}

.socials {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

<div class="socials">
  <div class="social">
    <img src="images/fb.png">
  </div>
  <div class="social">
    <img src="images/insta.png">
  </div>
  <div class="social">
    <img src="images/tt.png">
  </div>
  <div class="social">
    <img src="images/snap.png">
  </div>
</div>

Answer 2

我认为这是您正在寻找的答案。在你的css中执行此操作

.social {
  display: inline-block;
  width: 25px;
  height: 25px;
  cursor: pointer;
}

.socials{
  text-align:center;
}

点击here查看代码簿

如何将div与其他div中的图像居中？

2 个答案: