CSS Bottom Alignment与我的页脚有关

Question

我遇到了website

页脚的一些问题

我想将facebook like按钮，twitter按钮和语言选择器全部对齐在同一级别（即页面底部的几个px）。 目前您可以在图片上看到所有这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 */
}

Answer 2

使用Safari或Chrome，您可以按Cmd + Opt + I打开Web Inspector（也称为开发人员工具）。 在元素选项卡下，您将找到放大镜图标，它是元素选择器。

使用元素选择器将鼠标悬停在上面并单击元素以检查它们。

通过这个，您将看到每个按钮的最顶层或父元素具有以下类别（以及其他类别）：

.fb-like

和

.twitter-share-button

您现在可以为这些类编写CSS代码，并使用边距，填充或位置属性来调整其中一个按钮的位置，以使它们对齐。

有很多方法可以做到这一点。我可以通过选择.fb-like并使用top: -7px来对齐它们，但这可能不是最有说服力的解决方案。

您可以在Inspector的右侧面板中对所选元素进行CSS更改，并查看页面上实时反映的更改。然后，您可以将相同的CSS代码复制到您网站的CSS中。