文本不是垂直居中

我使用行高屬性將某些文本與菜單中的圖標對齊。我已經創建了一個簡化版本（沒有圖標）來說明我的問題。這似乎與字體的一般垂直對齊有關。文本不是垂直居中

你可以看到的jsfiddle這個問題：http://jsfiddle.net/KFxG3/1/

的代碼是非常簡單的：

<div>qb - Some text - qb</div>

加法風格：

div { 
    background-color: green; 
    height: 22px; 
    line-height: 22px; 
    font-size: 20px; 
    font-family: 'Segoe UI', 'Verdana', 'Arial'; 
}

這是怎麼看起來像：

This is how it looks like

，這是它應該如何看起來像：

And this is how it SHOULD look like

爲什麼會發生這種情況在新的瀏覽器？我已經在Firefox 27.0上的Windows 8.1 64位上測試過它。

編輯：我想知道，爲什麼瀏覽器不能正確渲染。如果將'a'這樣的小寫字母應用於「綠色」的頂部和底部，則應用高度與容器一樣的高度即可。但渲染是錯誤的。

編輯＃2：這是一個與字體問題。 Segoe UI似乎有一個奇怪的基準。當使用Arial，Verdana或任何垂直對齊更合適（但它也不完美）。 - >http://jsfiddle.net/KFxG3/22/

來源

2014-02-05 SuperNova

http://jsfiddle.net/KFxG3/3/ <---者均基於行爲是完美的，q總是流出來，你的文本也是垂直對齊的 –

你會說得對，@先生阿里恩我用了15px並查看它我是1出來！ '：（' – Albzi

但是，設置另一個行高來解決問題並不是正確的方法，看起來Segoe UI的基線是錯誤的。 – SuperNova

-1

您將特定的高度應用於div和行高..您不需要任何這些將垂直文本居中。

div { 
    background-color: green; 
    font-size: 20px; 
    font-family: 'Segoe UI', 'Verdana', 'Arial'; 
}

一個例子：http://jsfiddle.net/KFxG3/2/

來源

2014-02-05 14:34:01

您要添加/更改line-height。

要獲得中間的q和b，請使用line-height:16px;，但some text看起來不太好用。與16px;混亂，你可能會發現你想要的。

例子：

div{ 
    line-height:16px; 
}

來源

2014-02-05 14:34:08 Albzi

-1

vertical-align: middle; 
padding-bottom:5px;

，你必須在你的CSS添加

來源

2014-02-05 14:34:56

這對OP的代碼沒有任何幫助（在 – Albzi

給予padding-bottom：5px; –

請解釋你的解決方案，以便將來訪問者能夠理解這個問題是如何解決手頭上的問題的 – War10ck

你可以用你的文字部分到另一個<div>並且可以嘗試display:table和display:table-cell方法與verical-align:middle

雖然這是不同於你的要求，但我認爲你應該這樣練習：

從父

刪除行高完全

HTML

<div class="container"><div class="content">qb - Some text - qb</div></div>

CSS

.container { 
    background-color: green; 
    height: 55px; 
    display:table; // here it is 
    font-size: 20px; 
    font-family: 'Segoe UI', 'Verdana', 'Arial'; 
} 
.content{ 
    display:table-cell; // here it is 
    vertical-align:middle; 
}

來源

2014-02-05 14:38:43

謝謝，我已經試過了。在一個表格單元格中（我檢查了文字上方和下方的像素），總共有4或5個像素的差異 – SuperNova

DIV是錯誤的元素對你在這種情況下..只要試試這個和比較：

span { 
    background-color: green; 
    height: 22px; 
    line-height: 22px; 
    font-size: 20px; 
    font-family:'Segoe UI', 'Verdana', 'Arial'; 
} 

div { 
    background-color: green; 
    height: 22px; 
    line-height: 22px; 
    font-size: 20px; 
    font-family:'Segoe UI', 'Verdana', 'Arial'; 
}

而且

<span>qb - Some text - qb|ÜÄÖ</span> 
<br><br> 
<div>qb - Some text - qb|ÜÄÖ</div>

來源

2014-02-05 14:38:46 Franziska

'div's_從來不是錯誤的方法_ –

JSFiddle!

注意，如果您設置一個固定的高度，並且還調整字體大小，線條高度，然後將其綁定到凌亂。您可以將其設置爲浮動並移除高度並根據需要佔用盡可能多的高度或手動設置更大的高度，但仍使用不同的渲染技術在不同的瀏覽器中使用會使您難以保持相同的外觀。所以我建議我在JSFiddle中使用的方法..

然後您可以通過應用填充來彌補差異。

padding-bottom: 5px;

來源

2014-02-05 14:39:26

-1

這裏是更新的小提琴http://jsfiddle.net/KFxG3/16/

您需要刪除高度元素。 div根據字體大小計算高度。

CSS

div{ 
    background-color: green; 
    font-size: 20px; 
    font-family: 'Segoe UI', 'Verdana', 'Arial'; 
}

來源

2014-02-05 14:40:41

您可以在此代碼中看到一件好事，即在未給定高度和行高時文本不會垂直居中。可能是字體的問題？！ – SuperNova

○是的，可以是這種情況。 –

瀏覽器行爲正常。你可能會感到困惑，因爲你的字體大小，20像素小於你的行高，22像素，它似乎會適應。但它不會。

作爲一個例子，設置H1的字體大小爲24px將產生39px的行高。 12px字體大小會導致18px行高。

來源

2014-02-05 14:40:55 Kuzgun

我只是使用小於字體大小的行高來說明問題。小寫字母'a'之間的邊距應與「綠色」的上下邊界相同（或接近相同），但不是。 – SuperNova

實際尺寸是多少？ – Kuzgun

嘗試添加填充到您的代碼。

例子：

div { 
    background-color: green; 
    height: 22px; 
    line-height: 22px; 
    font-size: 20px; 
    font-family: 'Segoe UI', 'Verdana', 'Arial'; 
    padding: 5px 0; 
}

來源

2014-02-05 15:42:14 Connor

我試過了，但它不是垂直居中：http://jsfiddle.net/KFxG3/20/ - 您可以看到頂部和底部的不同距離。 – SuperNova

那麼如果你不能在默認情況下在中心獲得它，請嘗試調整代碼[http://jsfiddle.net/KFxG3/21/] –

我想這是你在找什麼： http://jsfiddle.net/KFxG3/19/

您需要將下面一行添加到您的CSS。

padding-bottom:5px;

但是，這不是線高度「應該」工作的方式。據我所知，像p和q這樣的字母的底部不被考慮到字體的中值高度值。你必須用大寫字母來衡量才能得到相當準確的結果。

順便說一句，你不需要div高度，除非它對你的元素在外面的高度有影響。

我建議你看一下「盒子尺寸」。防止填充元素擴大外部尺寸。另外，使用舊瀏覽器作爲衡量正確和錯誤的方式來做事情可能不是最簡單的方法來獲得任何CSS相關的結論。

來源

2014-02-05 16:22:31 GRowing

這就像是4年後，但有時你必須檢查盒子大小是否正確。

a{ 
    box-sizing: content-box 
}

然後你的行高和高度應該居中文本。

來源

2017-07-27 14:09:07

這並沒有改變任何東西：http://jsfiddle.net/KFxG3/30/ – SuperNova

每個瀏覽器都支持不同類型的文件格式，因爲有時瀏覽器無法按預期渲染字體屬性併發生行高問題。

對於付費字體，始終將所有字體擴展名文件添加到字體/供應商文件夾，並使用以下格式在樣式表中添加字體。

字體面格式：

 @font-face { 
     font-family: 'MyWeb'; 
     src: url('webfont.eot'); /* IE9 Compat Modes */ 
     src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ 
     url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ 
     url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
}

欲瞭解更多詳細信息，您可以參考以下鏈接： https://css-tricks.com/snippets/css/using-font-face/

來源

2017-07-27 14:41:23

儘管這個鏈接可能回答這個問題，但最好在這裏包含答案的基本部分，並提供參考鏈接。如果鏈接頁面更改，則僅鏈接答案可能會失效。 - [來自評論]（/ review/low-quality-posts/16850111） – Matthew

感謝您在這裏指導我，我已經更新了我的答案。 –

文本不是垂直居中

回答

相關問題