2016-04-12 83 views
3

我試圖儘可能寫出最好的標題,但我不確定如何準確描述這裏發生的事情,所以請隨時糾正它。爲什麼>直角引號(")不是垂直對齊的?

我想使用>直角引號(')而不是>直角引號(>),而'rsaquo;字符比位於行底部的>短,類似於句點(。)。這使得垂直對齊字符變得困難,而當我將其設置爲42px時,它很明顯。

是否有任何其他我可以使用的字符或任何我可以垂直對齊的方式?它可能是我的字體,但我沒有使用任何特別的東西。

下面是兩個字符的示例。第一個是>經常性右角支架,第二個是"位於底部的直角支架。

> character - vertically aligned › character - sitting on the bottom

+6

我完全肯定字符的排列完全取決於字體如何定義字形。這就是爲什麼它不是垂直對齊的原因。 – amphetamachine

+0

謝謝;看起來這是它看起來像這樣的唯一原因。我會研究其他方式來讓它垂直對齊,比如簡單地將其定位得更高或使用不同的字體。 – Alesana

回答

2

嘗試在span隔離的特點和使用CSS屬性line-heightfont-size垂直對齊。

此外,標準字體,如:宋體,verdana等默認情況下是正確垂直對齊的。

See example

+0

我曾經玩過使用行高的孤立角色,但無法使其工作。在宋體中(即使在你的例子中)角色仍然坐在底部,在verdana它是更垂直對齊,但也比我想要更清晰。我想我會嘗試找到一種以最好的方式顯示它的字體。 – Alesana

+0

(抱歉,延遲)請參閱更新的示例。 – Oriol

+1

與示例中相同的效果也可以簡單地使用填充底部進行復制:-(x)px ;,因爲將行高設置爲小於字體只會使其看起來垂直對齊。我想避免這種情況,因此我問爲什麼它不是垂直對齊的,看看我是否可以真正垂直對齊角色而不是欺騙它。我的問題的真正答案就是,在Arial字體中,›符號不是垂直對齊的。 amphetamachine已經在評論中正確回答了我的問題,但不幸的是我不能接受他的回答,因爲這是一條評論。 – Alesana

0

前面已經回答amphetamachine,這取決於你使用特定的字體如何定義的字形。

我發現解決這個問題的最佳方式(沒有硬編碼的像素偏移量)就是將字符放入自己的跨度,然後應用:vertical-align:PERCENTAGE%。 (在我的情況下,vertical-align:11%運行良好,但它取決於字體)。

以百分比形式表示即使使用不同的字體大小,它也會保留相同的位置。