Question

你好网站设计师和webdesigner很高兴。

知道我已经尝试为我的问题找到一个解决方案，但由于我对这个叫做CSS的东西很陌生，所以要知道我在这里寻找的设计与我的设计是否兼容有点过分有点压倒性

我放在div中的文字：

<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

WORKING DEMO

替代解决方案：

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路线接近这个，但是你是否考虑过在表格中进行格式化？看看这个小提琴click here

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

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

4 个答案: