html - 将包含在父元素中的旋转元素居中对齐

Question

我有一个元素正在使用transform: rotate(90deg);，但它不在父元素的中心。

我也试图让它尽可能跨浏览器（透明度等），但到目前为止还没有好运。

jsFIDDLE：http: //jsfiddle.net/K8RXr/4

*我旋转的原因<是因为我将来会使用图标字体/图像来替换它。

Answer 1

这似乎不是居中的原因是因为您已经旋转了它。当 css 停止转换时，它会执行所有正常样式，然后对其进行转换。因此，如果要删除transform，您会发现问题不在于水平居中，而在于垂直居中。要解决此问题，您必须添加

display:table-cell;
vertical-align:middle;

箭头在中间对齐

我这里有小提琴

此外，如果您需要帮助以使某些东西更加跨浏览器兼容，http ://prefixr.com/是一个很好的工具。例如，它会把你opacity:0.5;变成

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity:0.5;

哪个对 Internet Explorer 有帮助