居中對齊應用了額外字母間距的文本

居中對齊一些增加的文本的最佳方式是什麼使letter-spacing實際位於其容器的中心？該文本位於h5標記中，該標記在父div中居中對齊，但顯着位於左側，因爲letter-spacing適用於每個字母的右側。我可以手動添加一些左填充，但如果瀏覽器縮放級別發生更改，則不會保持一致。居中對齊應用了額外字母間距的文本

有沒有一種方法來計算每個字母之間的間距，無論是使用CSS或JavaScript？是否有更好的方法在字母之間插入空格以便所有內容都集中對齊？

容器div已經有20px填充所有我需要添加0.75em到左填充。下面是該h5和容器標籤相關的CSS：

.container { 
    padding: 20px; 
    float: left; 
} 

.container h5 { 
    font-size: 33px; 
    letter-spacing: 1.5em; 
    text-align: center; 
}

容器看起來是這樣的：

container

來源

2013-02-03 levelnis

可以嘗試在文本開始處添加。可以平衡它。 –

＃11px'太不幸了 - 另一種方式很不幸 - 雖然 – levelnis

你就不能指定padding-left: 1.5em;你.container h5？

來源

2013-02-03 22:54:10

這是一個漫長的一天 - 頂級大吼Matthew – levelnis

原來我的dekstop上只有Chrome瀏覽器 - 我的Chrome 24 for Windows的縮放比率被竊聽，間距和填充不以相同的比例進行縮放。 http://jsfiddle.net/MVHm8/ –

嗯，你確實是正確的 - 想知道我將如何解決這個問題？ +1指出。在容器上將填充改爲'2em'沒有什麼區別（在這裏大聲思考！），因爲它是由於規模比率 – levelnis

替代的解決方案可能是指定margin-right: -1.5em;爲.container h5，所以對齊時，你會不會增加額外的空間到您的容器。

來源

2013-02-03 23:05:59 Ragnarokkr

與接受的答案一樣好 - 謝謝 – levelnis

這是舊的，但另一個解決方案（技巧）是在角色之間添加一個空格。對我而言，這是最好的解決方案，因爲我希望字符之間有一個很大的空間;）

來源

2015-06-11 04:02:10 marcostrama

居中對齊應用了額外字母間距的文本

回答

相關問題