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;
}