CSS3在三角形內部對齊文本

我在頁面的左上角有一個三角形圖像，還有一些文本需要在底部居中（使用CSS3 transform: rotate）。我可以通過一些定位/邊距來實現，但它在瀏覽器中看起來並不一樣，它看起來有點向左或向右。CSS3在三角形內部對齊文本

有沒有辦法讓它居中，讓它在所有瀏覽器中均勻顯示？我做了一個example。在這裏，我使用CSS來製作三角形，但實際上我使用的是圖像。

我會很感激的建議。

來源

2011-06-18 brunn

您是否嘗試過使用CSS重置？ http://developer.yahoo.com/yui/3/cssreset/ – Ashley

如果知道三角形的基本寬度，則設置文本容器的width:等於基本寬度text-align: center;並旋轉。只要確定，文本容器的中心點也是基地的中心點。

經過一番計算，我做了一個例子：http://jsfiddle.net/VScFS/57/。在Chrome和Firefox中看起來一樣。

無論如何，我認爲這個問題與絕對定位有關。

來源

2011-06-18 22:00:49 atlavis

謝謝atlavis。我在文本容器div方面遇到了一些麻煩，我將它設置爲與三角形基底相同的寬度，但出於某種原因，文本會在chrome中分成兩行（我認爲它會呈現比其他瀏覽器更大的字體）。我必須給div一些額外的寬度，但是文本不會集中在opera和FF中。根據你的想法，我做了一些計算，並設法讓它非常接近我想要的。 – brunn

CSS3在三角形內部對齊文本

回答

相關問題