有谁知道我怎么把社交图标放在一起吗?
现在它们在彼此的下面，但我需要找到一种方法让它们紧挨着。
请看看我在这里的意思:网站
感谢——有更多的方法来做到这一点/只有一个例子与flex——
你可以使用Flexbox。下面是一个小示例:
(我用字体awesome的图标)
.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样式。下面是一个给定网站的代码示例。
每个图标都包含在<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 <img>:</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>