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

Question

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

我也在努力使它尽可能跨浏览器(透明度等)，但到目前为止还没有运气好。

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

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

Answer 1

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

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

为了让箭头居中对齐

我有 fiddle here

此外，如果您需要帮助制作更多跨浏览器兼容的东西，http://prefixr.com/是一个很好的工具来做到这一点。例如，它会将您的 opacity:0.5; 变成

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

哪个应该对 Internet Explorer 有帮助