Question

我试图让图标看起来像this，并以页面为中心。

HTML：

<aside class="social">
  <ul class="smicons">
    <li class="fbicon"><a href="http://facebook.com"><img src="img/fbicon.png"></a></li>
    <li class="twicon"><a href="http://twitter.com"><img src="img/twicon.png"></a></li>
    <li class="yticon"><a href="http://youtube.com"><img src="img/yticon.png"></a></li>
    <li class="igicon"><a href="http://instagram.com"><img src="img/igicon.png"></a></li>
  </ul>
</aside>

CSS：

.social {
  display: inline-block;
}

.smicons {
  background-color: transparent;
  list-style-type: none;
  border: none;
  float: left;
  padding-top: 15px;
  display: inline-block;
}

Answer 1

这是一个flexbox解决方案。

.smicons,
.smicons li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.smicons {
  display: flex;
  justify-content: center;
}
.smicons li {
  margin: 5px;
}

<aside class="social">
  <ul class="smicons">
    <li class="fbicon"><a href="http://facebook.com"><img src="http://placehold.it/25x25/FC0"></a></li>
    <li class="twicon"><a href="http://twitter.com"><img src="http://placehold.it/25x25/FC0"></a></li>
    <li class="yticon"><a href="http://youtube.com"><img src="http://placehold.it/25x25/FC0"></a></li>
    <li class="igicon"><a href="http://instagram.com"><img src="http://placehold.it/25x25/FC0"></a></li>
  </ul>
</aside>

Answer 2

这是一个基于你的CSS的解决方案..检查css部分和那些评论。对不起，我的英语不好。

.social {
 display:block;  /*need aside as a block element by default aside is  block */
  text-align:center;/*text align center set the ul section to center ;*/
}

.smicons {
  background-color: transparent;
  list-style-type: none;
  border: none;
   padding-left:0;/*ul element by default padding-left:40px;*/
  padding-top: 15px;
  display: inline-flex;/*inline-flex set those icon side by side */
}

<aside class="social">
  <ul class="smicons">
    <li class="fbicon">
      <a href="http://facebook.com"><img src="https://cdn2.iconfinder.com/data/icons/social-18/512/Facebook-3-128.png"></a>
    </li>
    <li class="twicon">
      <a href="http://twitter.com"><img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-128.png"></a>
    </li>
    <li class="yticon">
      <a href="http://youtube.com"><img src="https://cdn2.iconfinder.com/data/icons/social-icons-color/512/youtube-128.png"></a>
    </li>
    <li class="igicon">
      <a href="http://instagram.com"><img src="https://cdn2.iconfinder.com/data/icons/social-icons-33/128/Instagram-128.png"></a>
    </li>
  </ul>
</aside>

如何并排显示这些图标并以页面为中心？

2 个答案: