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在三角形内部对齐文本

回答

相关问题