HTML + CSS问题，Chrome / Safari与Firefox文本定位问题

Question

各位网站设计人员和网站设计人员，您好。

知道我已经设法找到解决问题的方法，但是由于我对这个叫做CSS的东西还很陌生，所以在使我的设计兼容方面确切地知道我在这里寻找什么实在有些让人不知所措。

我在div中放置的文本：

http://jsfiddle.net/tsaulic/W22DC/67/

<div id="header-social-icons"><a href="http://test">C</a><a href="http://test">M</a><a href="http://test">F</a></div>

和我的CSS

#header-social-icons {
    position: relative;
    float: right;
    width: 90px;
    height: 30px;
    margin: auto;
    padding: 0;
    font-family: "Social Logos";
    text-align: right;
    font-size: 24px;
}

在Chrome / Safari中呈现相同，但在Firefox中呈现不同。 Chrome和Safari都将其放置在更靠近div容器底部的位置，而Firefox则相反（顶部）。 我尝试使用http://www.quirksmode.org/css/clearing.html中的解决方案，并且我也在使用normalize.css（2.1.1）

请注意，同时使用这两种方法都不会解决我的问题，也不会使其变得更糟或变得更好。

我想念什么？ 我尝试使用页边距，减小字体大小（不是溢出问题），增加div容器的高度以及许多其他功能。 :(

我想实现容器内的文本垂直居中。 它不在两个浏览器中居中。

请帮忙。

另一个注意事项：所有其他标头div在所有浏览器中均显示相同，但​​我的一个搜索字段在Chrome / Safari中的位置比Firefox低2px。

---

只是一个更新：为了更清楚地说明问题出在哪里……正如AnaMaria的建议，我只需要添加与我的身高相同的行高值即可。

像这样：

height: 24px;
line-height: 24px;

Answer 1

好的，这就是您想要的...

vertical-align:middle

工作演示

替代解决方案：

DEMO

采用线高法。

CSS

#header-social-icons {
    background-color:#fffdd0;
    width: 100%;
    height: 100px text-align: center;
}

检查这些链接以获取更多信息LINK 1 LINK 2

Answer 2

将以下CSS添加到容器 div ：

vertical-align: middle;
display: table-cell;

例：

<div style="vertical-align: middle; display: table-cell; height: 500px; width: 400px; border: 1px solid black;">    
    <div id="header-social-icons"><a href="http://test">C</a><a href="http://test">M</a><a href="http://test">F</a></div>
<div>

Answer 3

好吧，尝试一下：

width: 100%;
text-align: center;

Answer 4

我知道您正在通过CSS路由来实现此目的，但是您是否考虑过在表格中设置格式？ 看看这个小提琴点击这里

HTML

<table id="header-social-icons">
    <tr>
        <td>
            <a href="http://test">C</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="http://test">M</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="http://test">F</a>
        </td>
    </tr>
</table>

CSS

#header-social-icons {
    position: relative;
    float: right;
    width: 90px;
    height: 30px;
    margin: auto;
    padding: 0;
    font-family: "Arial";
    text-align: right;
    font-size: 28px;
}