是否有可能將文本垂直居中在邊界框中？

但是，我使用適當的CSS來實現垂直居中，這不是問題。

問題在於字體本身。字形不在實際文本中居中。選擇文本會顯示邊界框，從這裏我可以看到文本下方的空間不均勻。

LINE-HEIGHT似乎沒有解決這個問題。邊界框仍然是關閉的，即使行高爲0.我可以在我的元素頂部添加填充以嘗試修復此問題，但這不會在使用此字體的許多元素中擴展。

看起來不均勻的空間是由於下降。這是有道理的，但不幸的是，它並沒有讓我更接近找出如何真正垂直居中這個文本。

有問題的字體是SouvenirStd介質，但我已經與其他許多網頁字體注意到這一點。這是始終關閉，無論所使用元素... H1的，段落標記等

雖然這可能不會是有用的，這裏有一個例子我樣式的標題：

font-family: SouvenirStd-Medium; 
font-size: 5rem; 
font-weight: 400; 
font-style: normal; 
line-height: 1.3; 
letter-spacing: 0;

和示例我如何將文本置於包裝標籤中。

div { 
    display: flex; 
    height:100px; 
    align-items: baseline; 
}

來源

2016-04-27 lostPixels

*「問題在於字體本身。」* - 是的......沒有一種方法可以解決這個問題。任何解決方案都是** font-dependent **。如果設計師如此堅持，讓他們找到一個沒有這個問題的字體。 –

嘗試顯示：塊或其他內嵌的東西 –

您能提供您正在使用的CSS代碼嗎？ –

線

高度不會幫助問題，因爲它會增加或減去的空間到單個文本行的頂部和底部的等量，基於字體本身內所限定的頂部和底部的間距（見line-height description at w3c欲知更多信息）。這意味着你需要找到一種不同的字體，以獲得你想要的東西而不會偏離你的方式。

padding-top或padding-bottom如果您使用em作爲單位，這是相對於字母總高度（包括上面和下面的空格）的工作很好。這將允許您通過相同的相對量翻過整個網頁轉向文字，字體大小的獨立的（你可以使用從那裏line-height來管理各條線之間的距離）：

.font-timesnewroman { 
    font-family: 'Times New Roman', serif; 
    padding-top: 0.1em; 
}

改編從一個黑客，我發現in this blog post，這裏如果以上不爲你工作（但也有點窄的應用程序）一個可能的解決方案：

div { 
 
    height: 100px; 
 
    margin-top: 40px; 
 
    border: thin dotted gray; 
 
    text-align: center; 
 
} 
 
.text { 
 
    font-size: 100px; 
 
    line-height: 0px; 
 
    background-color: #9BBCE3; 
 
} 
 
.text::after { 
 
    content:''; 
 
    display: inline-block; 
 
    height: 80%; /* adjust this to shift the text */ 
 
}

<div> 
 
    <span class="text">Test</span> 
 
</div>

這具有以下特點和制約因素：

作品元素上述解決方案不，例如，因爲你想已經樣式元素具有填充
允許您調整使用百分比或em值的基線（所以它們按字體大小進行縮放）
中途可以使用後選擇器，但是需要文本週圍的跨度（或其他行內渲染）元素被定位
只能工作用於非包裝線

來源

2016-04-27 15:29:34 TheThirdMan

是否有可能將文本垂直居中在邊界框中？

回答

相關問題