我有 3 个图标,我想将它们居中对齐 我尝试了不同的代码,但到目前为止没有任何效果,我尝试为其添加边距,但问题是它在它们之间添加了不必要的空间,所以我希望它们彼此靠近,有没有办法将 margin-right 放在它上面并从那里删除空间?我只想将它们对齐到我的段落下方,但在它的中心。
到目前为止,这是我的代码。
#body a img {
width: 50px;
height: 50px;
margin-top: 50px;
margin-right: 200px;
}
<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>
会不会是一个简单的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>
我是一名优秀的程序员,十分优秀!