html - 需要帮助将图片与文字对齐

Question

我使用 HTML、CSS 和 Jscript 编写了一个网站。在本网站的页 footer 分，我放置了社交网站链接，例如-facebook、twitter、youtube、google+，如下所示:

如您所见，图标未与文本对齐；我请求帮助对齐它们。

HTML:

<footer>
Find us @ 
<a href=""><img src="assets/images/facebook.png" alt="facebook"></a> 
<a href=""><img src="assets/images/twitter.png" alt="twitter"></a> 
<a href=""><img src="assets/images/google+.png" alt="google plus"></a> 
<a href=""><img src="assets/images/youtube.png" alt="youtube"></a>
</footer>

CSS:

footer                  {    
                        color: white;
                        width: 100%;
                        font-family: Arial, sans-serif;
                        font-weight: bold;
                        font-size: 10px;
                        background-color: black;
                        height: 30px;
                        text-align: center;
                        }


footer img              {
                        padding-top: 5px;
                        padding-bottom: 0px;
                        }

Answer 1

将 vertical-align:middle; 添加到您的图像 CSS:

footer img {
    padding-top: 5px;
    padding-bottom: 0px;
    vertical-align:middle;
}

请注意，您可能需要调整内边距。