HTML + CSS 问题，Chrome/Safari vs Firefox 文本定位问题答案

【问题标题】：HTML + CSS issue, Chrome/Safari vs Firefox text positioning issueHTML + CSS 问题，Chrome/Safari vs Firefox 文本定位问题
【发布时间】：2013-08-07 00:10:05
【问题描述】：

各位网页设计师和网页设计师爱好者您好。

知道我已经尝试为我的问题找到解决方案，但由于我对 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。

只是一个更新：为了更清楚问题是什么...我只需要添加与我的身高相同的 line-height 值，正如 AnaMaria 所建议的那样。

像这样：

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

【问题讨论】：

好吧，我确实说“我是新人”而不是“对于这个叫做 CSS 的新事物”：D
哦，好吧。那是我的错。

标签： html css

【解决方案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

【讨论】：

您在 San 的答案的 cmets 中发布的 jsfiddle sn-p 对我来说非常有效。如果你用它更新这个答案，我会接受它。再次感谢，不胜感激。

【解决方案2】：

试试这个：

width: 100%;
text-align: center;

【讨论】：

不客气，但是你明白垂直（|）和水平（-）的区别吗

【解决方案3】：

我知道您正在通过 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;
}

【讨论】：

【解决方案4】：

将以下 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>

【讨论】：