如何将社交图标并排放置？

Question

有谁知道如何将社交图标并排放置？

目前它们在彼此下面，但我需要找到一种方法让它们彼此相邻。

请看我这里的意思：Website

谢谢

Answer 1

--- 有更多方法可以做到这一点/仅以 flex 为例 ---

您可以为此使用 Flexbox。这是一个小例子：

（我为图标使用了很棒的字体）

.myDiv {
  display: flex;
  justify-content: center;
}
.myDiv p {
  margin-left: 10px;
}

<body style="background-color:#3A456C;">

<div class="myDiv">
<p><a title="Facebook" href="https://www.facebook.com/hypematrixuk" target="_blank"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.hypematrix.co.uk/Facebook.png" alt="Facebook" width="30" height="30" /></a></p>
<p><a title="Twitter" href="https://twitter.com/hype_matrix" target="_blank"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.hypematrix.co.uk/Twitter.png" alt="Twitter" width="30" height="30" /></a></p>
<p><a title="YouTube" href="https://www.youtube.com/channel/UCwXh7RLCAsx8p8U4eDc_CJg" target="_blank"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.hypematrix.co.uk/YouTube.png" alt="YouTube" width="30" height="30" /></a></p>
<p><a title="Linkedin" href="https://www.linkedin.com/company/hype-matrix/" target="_blank"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.hypematrix.co.uk/Linkedin.png" alt="Linkedin" width="30" height="30" /></a></p>
</div>

</body>

如果您希望它们位于彼此之下，请将“flex-direction: column”添加到 myDiv 样式中。这是给定网站代码的示例。

Answer 2

每个图标都包含在 <p> 中，这意味着它们将在单独的一行中。比起为每个图标设置 display: block; ，这也会强制它在单独的行上。去掉这两个，它们将显示在一行中，将所有图标封装到一个容器中，这样您就可以将它们放在中心。

/* fixed */
.footer.media img {
  width: 30px;
  height: 30px;
}


/* fixed + alternative */
div.footer {
  text-align: center;
}

/* alternative */

.footer.media2 > a[title]:before
{
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: contain;
}

.footer.media2 > a[title="Facebook"]:before
{
  background-image: url('https://www.hypematrix.co.uk/Facebook.png');
}
.footer.media2 > a[title="Twitter"]:before
{
  background-image: url('https://www.hypematrix.co.uk/Twitter.png');
}
.footer.media2 > a[title="YouTube"]:before
{
  background-image: url('https://www.hypematrix.co.uk/YouTube.png');
}
.footer.media2 > a[title="Linkedin"]:before
{
  background-image: url('https://www.hypematrix.co.uk/Linkedin.png');
}


/* ignore this */

body {
  background-color: #3A456C;
  color: white;
}

h3 {
  text-align: center;
}

<h3>Original:</h3>
<p>
  <a title="Facebook" href="https://www.facebook.com/hypematrixuk" target="_blank">
    <img style=" display: block;  margin-left: auto;  margin-right: auto; " src="https://www.hypematrix.co.uk/Facebook.png" alt="Facebook" width="30" height="30">
  </a>
</p>
<p>
  <a title="Twitter" href="https://twitter.com/hype_matrix" target="_blank">
    <img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.hypematrix.co.uk/Twitter.png" alt="Twitter" width="30" height="30">
  </a>
</p>
<p>
  <a title="YouTube" href="https://www.youtube.com/channel/UCwXh7RLCAsx8p8U4eDc_CJg" target="_blank">
    <img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.hypematrix.co.uk/YouTube.png" alt="YouTube" width="30" height="30">
  </a>
</p>
<p>
  <a title="Linkedin" href="https://www.linkedin.com/company/hype-matrix/" target="_blank">
    <img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.hypematrix.co.uk/Linkedin.png" alt="Linkedin" width="30" height="30">
  </a>
</p>


<h3>Fixed:</h3>
<div class="footer media">
  <a title="Facebook" href="https://www.facebook.com/hypematrixuk" target="_blank"><img src="https://www.hypematrix.co.uk/Facebook.png" alt="Facebook"></a>
  <a title="Twitter" href="https://twitter.com/hype_matrix" target="_blank"><img src="https://www.hypematrix.co.uk/Twitter.png" alt="Twitter"></a>
  <a title="YouTube" href="https://www.youtube.com/channel/UCwXh7RLCAsx8p8U4eDc_CJg" target="_blank"><img src="https://www.hypematrix.co.uk/YouTube.png" alt="YouTube"></a>
  <a title="Linkedin" href="https://www.linkedin.com/company/hype-matrix/" target="_blank"><img src="https://www.hypematrix.co.uk/Linkedin.png" alt="Linkedin"></a>
</div>



<h3>Alternative no &lt;img&gt;:</h3>
<div class="footer media2">
  <a title="Facebook" href="https://www.facebook.com/hypematrixuk" target="_blank"></a>
  <a title="Twitter" href="https://twitter.com/hype_matrix" target="_blank"></a>
  <a title="YouTube" href="https://www.youtube.com/channel/UCwXh7RLCAsx8p8U4eDc_CJg" target="_blank"></a>
  <a title="Linkedin" href="https://www.linkedin.com/company/hype-matrix/" target="_blank"></a>
</div>

如何将社交图标并排放置？

How do I put social icons next to each other?

html

icons