居中對齊父元素中包含的旋轉元素

Question

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

我也試圖使這個跨瀏覽器儘可能（透明度等），但迄今還沒有最好的運氣。

的jsfiddle：我旋轉<http://jsfiddle.net/K8RXr/4

*的原因是因爲我會用一個圖標字體/圖像在將來取代這一點。

Answer 1

這似乎不是居中的原因是因爲您已將其旋轉。當css離開轉換時，它會完成所有常規樣式，然後轉換它。因此，如果您要刪除transform，您會發現問題不在於水平居中，而在於垂直居中問題。爲了解決這個問題，必須添加

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

的箭頭中間

我有小提琴here

而且對齊，如果你需要做更多的東西跨瀏覽器兼容幫助，http://prefixr.com/是一個很好的工具。例如，它會變成你的opacity:0.5;到

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

這應有助於爲Internet Explorer