HTML + CSS問題，Chrome/Safari與Firefox的文本定位問題

你好夥伴webdesigners和webdesigner wannabes。HTML + CSS問題，Chrome/Safari與Firefox的文本定位問題

知道我試圖爲我的問題找到一個解決方案，但由於我對這個稱爲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出現相同跨

剛剛更新所有的瀏覽器，但它較低的定位類似的2px在Chrome/Safari瀏覽器比Firefox我的搜索字段中的一個：這樣可以很清楚是什麼問題是...我只是不得不添加與我的身高相同的行高值，正如AnaMaria所建議的那樣。

像這樣：

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

來源

2013-08-06 tsaulic

嗯，我確實說過「我是新」不「這個所謂的CSS新事物」：d – tsaulic

哦。那我不好。 – AnaMaria

OK是你loooking什麼。 ..

vertical-align:middle

WORKING DEMO

替代解決方案：

DEMO

使用線高度方法。

CSS

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

檢查這些鏈接，瞭解更多信息 LINK 1 LINK 2

來源

2013-08-06 12:25:07 AnaMaria

你在San的回答中發佈的jsfiddle片段對我來說是完美的。如果你用它更新這個答案，我會接受它。再次感謝，感謝。 – tsaulic

沒有。現在檢查。 – AnaMaria

添加以下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-06 12:24:03

那麼試試這個：

width: 100%; 
text-align: center;

來源

2013-08-06 12:28:40

不要粗魯，但你明白垂直（|）和水平（ - ）的區別嗎？ – AnaMaria

我知道你通過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; 
}

來源

2013-08-06 12:35:03 fenix

HTML + CSS問題，Chrome/Safari與Firefox的文本定位問題

回答

相關問題