页脚图标未对齐

Question

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

这是包含所有代码的 fiddle：

编辑：这是目前正在发生的事情的照片

Answer 1

如果我没理解错的话，那是你想多了。为什么不将所有锚标记放在同一个 div 中，然后在文本锚标记上使用 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;
}

Answer 2

你是说你想要整个区域底部的图标吗？

如果是这样，这里有几件事。 1) clear: all 不存在（它的 both）

您应该将社交图标 div 移到右栏之后，并将 clear: left 添加到社交图标 div。这是更新后的 fiddle

Demo

.footer {
background-color: #5c0e13;
color: white;
display: inline-block;
width: 100%;
}

.favicon, .footernav, .socialmedia, .socialmediaicons {
  float: left;
}

.favicon {
 margin-left: 1%;
 margin-top: 1%;
 margin-right: 1%;
}

.footernav a {
 text-decoration: none;
 color: white;
 transition: .3s color;
}

.footernav a:hover {
 color: #db1421;
}

.socialmedia {
 margin-left: 40%;
  float: right;
}

.social {
 width: 20px;
}

.socialmedia a {
 text-decoration: none;
 color: white;
 transition: .3s color;
}

.socialmedia a:hover {
 color: #db1421;
}

.socialmediaicons {
 clear: left;
 display: block;
}

  <div class="footer">
   <div class="favicon">
    <a href="index.html"><img id="favicon" src="assets/favicon.png"></a>
   </div>
   <div class="footernav">
    <a href="index.html"><p>Home</p></a>
    <a href="ourteam.html"><p>Our Team</p></a>
    <a href="weddings.html"><p>Weddings</p></a>
    <a href="events.html"><p>Events</p></a>
    <a href="contact.html"><p>Contact</p></a>
   </div>
   <div class="socialmedia">
    <a href="https://www.facebook.com/yourstorybookmemory/"><p>Storybook Memories</p></a>
    <a href="https://www.instagram.com/yourstorybookmemory/"><p>yourstorybookmemory</p></a>
    <a href="https://twitter.com/sbvideography"><p>@sbvideography</p></a>
    <a href="https://www.youtube.com/channel/UCcMVbKyDIJN0Ht-6VjDiFKA"><p>Storybook Memories</p></a>
    <a href="mailto:inquiries@yourstorybookmemory.com"><p>inquiries@yourstorybookmemory.com</p></a>
   </div>
      <div class="socialmediaicons">
    <a href="https://www.facebook.com/yourstorybookmemory/"><img class="social" src="assets/facebook.png"></a>
    <a href="https://www.instagram.com/yourstorybookmemory/"><img class="social" src="assets/instagram.png"></a>
    <a href="https://twitter.com/sbvideography"><img class="social" src="assets/twitter.png"></a>
    <a href="https://www.youtube.com/channel/UCcMVbKyDIJN0Ht-6VjDiFKA"><img class="social" src="assets/youtube.png"></a>
    <a href="mailto:inquiries@yourstorybookmemory.com"><img class="social" src="assets/mail.png"></a>
   </div>
  </div>

页脚图标未对齐

Footer Icons Not Lining Up In Position

html

css

footer

Demo