B Johnson B Johnson - 3 months ago 7
CSS Question

Footer Icons Not Lining Up In Position

I can't seem to get my social media icons to line up top to bottom with the accompanying words. I am looking for any suggestions on how I might be able to go about this? I've tried

display: block
, etc, but I can't seem to get it to work. I think if I could get it to line up top to bottom I could figure the rest out.

Here's a fiddle with all the code:

https://jsfiddle.net/o4aajsmu/

Edit: here's a pic of what's going on right now

enter image description here

Answer

If i'm understanding correctly, you're overthinking it. Why wouldn't you put all of your anchor tags in the same div and then use display:inline-block on the text anchor tags? Check out this 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;
}
Comments