Question

这可能更容易在小提琴上看到。我有社交图标，其链接显示在他们旁边。问题是，社交图标是40x40。文本显示在图标的底部。我希望文本位于图标的中心。我怎么把它拉下来？似乎无法弄明白。非常感谢任何帮助！

<footer>
  <ul>
    <li><a href="https://www.facebook.com" target="_blank" title="Like us @ Facebook.com"><div class="footer_icon facebook"></div><div class="iconText">Facebook.com</div></a></li>
    <li><a class="inst" href="http://instagram.com" target="_blank" title="Follow on Instagram"><div class="footer_icon instagram"></div><div class="iconText">We're on Instagram</div></a></li>
    <li><a class="twt" href="https://twitter.com" target="_blank" title="Follow us @ Twitter.com"><div class="footer_icon twitter"></div><div class="iconText">Twitter.com</div></a></li>
    <li class="right"><a class="pin" href="http://www.pinterest.com" target="_blank" title="Visit Pinterest.com"><div class="footer_icon pinterest"></div><div class="iconText">Pinterest.com</div></a></li>
  </ul>
</footer>

Answer 1

以下似乎有效：

.footer_icon {
    height: 40px;
    width: 40px;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
    display:inline-block;
    vertical-align: middle;
}

将vertical-align: middle添加到.footer-icon的CSS规则中。

请参阅演示：http://jsfiddle.net/audetwebdesign/g3Jk6/

div文本在基线而不是中间对齐

1 个答案: