2

你好网页设计师和网页设计师崇拜者。

知道我已经尝试为我的问题找到解决方案，但是由于我对这个叫做 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;
4

4 回答 4

1

好的，这就是您要寻找的...

vertical-align:middle

工作演示

替代解决方案：

演示

使用线高方法。

CSS

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

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

于 2013-08-06T12:25:07.870 回答
0

我知道您正在通过 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;
}
于 2013-08-06T12:35:03.047 回答
0

将以下 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>
于 2013-08-06T12:24:03.497 回答
0

试试这个：

width: 100%;
text-align: center;
于 2013-08-06T12:28:40.447 回答