Question

我有3个图标，我想在中心对齐它们我尝试了不同的代码但是到目前为止没有任何工作，我试着给它留一个边距，但问题是它添加了一个他们之间不必要的空间，所以我希望他们彼此接近，有没有办法把边距放到它并从那里删除空间？我只是想把它们对齐在我的段落下面但在它的中心。
到目前为止我的代码。

＆＃13;

    #body a img {
      width: 50px;
      height: 50px;
      margin-top: 50px;
      margin-right: 200px;
    }

＆＃13;

<div id="body">
  <p class="text">We are a group of friends that enjoy playing League Of Legends togather, feel free to follow us on our different website medias</p>
  <div class="icons">
    <a href="https://www.youtube.com/themunkiuke">
      <img class="icon1" src="images/youtube.png">
    </a>
    <a href="http://www.twitch.tv/siminios">
      <img class="icon2" src="images/twitch.png">
    </a>
    <a href="http://yinochi.deviantart.com/gallery/">
      <img class="icon3" src="images/art.png">
    </a>
  </div>

＆＃13;

Answer 1

是否会丢失一个简单的text-align？

#body a img {
      width: 50px;
      height: 50px;
    }
.icons {
  text-align:center;
  }

<div id="body">
  <p class="text">We are a group of friends that enjoy playing League Of Legends togather, feel free to follow us on our different website medias</p>
  <div class="icons">
    <a href="https://www.youtube.com/themunkiuke">
      <img class="icon1" src="images/youtube.png">
    </a>
    <a href="http://www.twitch.tv/siminios">
      <img class="icon2" src="images/twitch.png">
    </a>
    <a href="http://yinochi.deviantart.com/gallery/">
      <img class="icon3" src="images/art.png">
    </a>
  </div>

Answer 2

此处您 DEMO

＆＃13;

#body a img {
  width: 50px;
  height: 50px;
}
.icons {
  text-align: center;
}

＆＃13;

<div id="body">
  <p class="text">We are a group of friends that enjoy playing League Of Legends togather, feel free to follow us on our different website medias</p>
  <div class="icons">
    <a href="https://www.youtube.com/themunkiuke">
      <img class="icon1" src="images/youtube.png">
    </a>
    <a href="http://www.twitch.tv/siminios">
      <img class="icon2" src="images/twitch.png">
    </a>
    <a href="http://yinochi.deviantart.com/gallery/">
      <img class="icon3" src="images/art.png">
    </a>
  </div>

＆＃13;

Answer 3

这是一个演示https://jsfiddle.net/r4wwczao/

在HTML中，我为每个图标添加了一个容器，以便为它们提供百分比大小（边框只是为了更好地查看解决方案）：

<div id="body">
  <p class="text">We are a group of friends that enjoy playing League Of Legends togather, feel free to follow us on our different website medias </p>
  <div class="icons">
    <div class="icon_div">
    <a href="https://www.youtube.com/themunkiuke"><img class="icon1" src="images/youtube.png"></a>
    </div>
    <div class="icon_div">
    <a href="http://www.twitch.tv/siminios"><img class="icon2" src="images/twitch.png"></a>
    </div>
    <div class="icon_div">
    <a href="http://yinochi.deviantart.com/gallery/"><img class="icon3" src="images/art.png"></a>
    </div>
  </div>
</div>

和CSS：

img{
    width: 50px;
    height: 50px;
}

.icon_div{
  border:1px black solid;
  display: inline-block;
  text-align: center;
  width:32%;
}

如何在CSS中正确对齐图片

3 个答案: