CSS3如何将文本居中放置在三角形内部

Question

4

我在页面左上角有一个三角形图片，需要在其底部居中显示一些文本（使用CSS3 transform: rotate）。我可以通过定位/边距来实现，但在不同的浏览器中显示效果不同，会稍微偏向左或右。

有没有一种方法可以使它在所有浏览器中均匀地显示？

我制作了一个示例。这里我使用CSS制作三角形，但实际上我使用的是图像。

我希望能得到一些建议。

- brunn

你尝试过使用CSS重置吗？ http://developer.yahoo.com/yui/3/cssreset/ - Ashley

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- atlavis · Accepted Answer

如果您知道三角形的底部宽度，则将文本容器的width:设置为基础宽度，text-align: center;并旋转。只需确保文本容器的中心点也是基准线的中心点即可。

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

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