CSS3 центрирование текста внутри треугольника

Question

У меня есть изображение треугольника в верхнем левом углу страницы, и некоторый текст, который должен быть центрирован внутри него внизу (используя CSS3 transform: rotate).Я могу сделать это с некоторыми позициями / полями, но он не выглядит одинаково во всех браузерах, он выглядит немного влево или вправо.

Есть ли способ отцентрировать его, чтобы он отображался равномерно во всех браузерах?

Я сделал пример .Здесь я использую CSS для создания треугольника, но на самом деле я использую изображение.

Буду признателен за предложения.

Answer 1

Если вы знаете базовую ширину треугольника, тогда установите width: текстового контейнера равным базовой ширине, text-align: center; и поверните.Просто убедитесь, что центральная точка текстового контейнера также является центральной точкой базы.

После некоторых вычислений я сделал пример: http://jsfiddle.net/VScFS/57/. Он выглядит одинаково в Chrome и Firefox.

Во всяком случае, я думаю, что проблема связана с абсолютным позиционированием.