我的页脚存在 CSS 底部对齐问题

Question

我的 website 的页脚遇到了一些问题

我想让 facebook 按钮、twitter 按钮和语言选择器都在同一水平对齐(即:距页面底部几像素)。目前，正如您在图片上看到的，所有这 3 个元素都具有不同的垂直对齐方式。你能帮我找出并解决这个问题吗？

HTML代码:

<div id="footer">
<div id="social"><div class="fb-like" data-href="http://www.gregsitedfds.com" data-send="false" data-layout="button_count" data-width="106" data-show-faces="false" data-font="verdana"></div><a href="https://twitter.com/share" class="twitter-share-button" data-lang="msa">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
    <span class="languageselector"><a href="fr/" title="Version Française">FR</a> | <a href="en/" title="English Version">EN</a> | <a href="index.htm" title="Norway Version">NO</a></span></div>

CSS 代码:

#footer
{
    position:fixed;
    bottom:0;
    color:#333;
    left:0;
    z-index:999;
    width:96%;
    text-align:right;
    padding:30px 2%;
}

#social
{
    position:absolute;
    vertical-align:middle;
    left:2%;
    color:#333;
}

Answer 1

你需要:

.fb_iframe_widget, 
iframe.twitter-share-button {
    display: inline-block;
    vertical-align: middle;
}

通过开发人员工具添加 vertical-align: middle; 解决了我的问题(display: inline-block; 已经存在)。

为了也对齐语言菜单，你需要有

span.languageselector {
    display: inline-block;
    height: 20px; /* same height as #social div */
    line-height: 20px; /* same as height */
}