html - CSS3 三 Angular 形内文本居中

Question

我在页面的左上角有一个三 Angular 形图像，底部有一些需要居中的文本(使用 CSS3 transform: rotate)。我可以用一些定位/边距来做到这一点，但它在浏览器中看起来不一样，它看起来有点偏左或偏右。

有没有办法将它居中以便在所有浏览器中均匀显示？

我做了一个 example .这里我使用 CSS 来制作三 Angular 形，但实际上我使用的是图像。

我会很感激你的建议。

Answer 1

如果您知道三 Angular 形的底宽，则将文本容器的 width: 设置为等于底宽，text-align: center; 并旋转。只要确保，文本容器的中心点也是基础的中心点。

经过一番计算，我做了一个例子:http://jsfiddle.net/VScFS/57/ .它在 Chrome 和 Firefox 中看起来一样。

无论如何，我认为问题与绝对定位有关。