html - 页脚图标未对齐

Question

我似乎无法让我的社交媒体图标从上到下与伴随的文字对齐。我正在寻找有关如何解决此问题的任何建议？我试过 display: block 等，但我似乎无法让它工作。我想如果我能让它从上到下排成一行，我就能解决剩下的问题。

这是所有代码的 fiddle :

https://jsfiddle.net/o4aajsmu/

编辑:这是现在正在发生的事情的图片

Answer 1

如果我没理解错的话，那是你想多了。为什么不将所有 anchor 标记放在同一个 div 中，然后在文本 anchor 标记上使用 display:inline-block？看看这个 fiddle .

<div class="socialmedia">
    <a href="https://www.facebook.com/yourstorybookmemory/"><img class="social" src="assets/facebook.png"></a>
    <a class="socialText" href="https://www.facebook.com/yourstorybookmemory/"><p>Storybook Memories</p></a><br/>
    <a href="https://www.instagram.com/yourstorybookmemory/"><img class="social" src="assets/instagram.png"></a>
    <a class="socialText" href="https://www.instagram.com/yourstorybookmemory/"><p>yourstorybookmemory</p></a><br/>
    <a href="https://twitter.com/sbvideography"><img class="social" src="assets/twitter.png"></a>
    <a class="socialText" href="https://twitter.com/sbvideography"><p>@sbvideography</p></a><br/>
    <a href="https://www.youtube.com/channel/UCcMVbKyDIJN0Ht-6VjDiFKA"><img class="social" src="assets/youtube.png"></a>
    <a class="socialText" href="https://www.youtube.com/channel/UCcMVbKyDIJN0Ht-6VjDiFKA"><p>Storybook Memories</p></a><br/>
    <a href="mailto:inquiries@yourstorybookmemory.com"><img class="social" src="assets/mail.png"></a>
    <a class="socialText" href="mailto:inquiries@yourstorybookmemory.com"><p>inquiries@yourstorybookmemory.com</p></a><br/>
</div>

.socialText{
  display:inline-block;
}