CODEWITHSUNDEEP
htmlcss
O P
O P

Reputation: 2365

Center align rotated element contained within parent element

I have an element using transform: rotate(90deg); but it is not centered in the parent element.

I am also trying to make this as cross-browser as possible (transparency, etc) but so far haven't had the best of luck.

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

*Reason I am rotating < is because I will be using an icon font/image to replace this in the future.

Upvotes: 0

Views: 150

Answers (1)

Cody Guldner
Cody Guldner

Reputation: 2896

The reason that this doesn't appear to be centering is because you have rotated it. When css goes off of transformations, it does all of the normal styling, then transforms it. So if you were to remove the transform, you would see that the problem doesn't lie with the horizontal centering, it is the vertical centering that is the problem. To solve this, you must add

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

for the arrow to align in the middle

I have the fiddle here

Also, if you ever need help with making something more cross-browser compatible, http://prefixr.com/ is a great tool for doing this. For example, it would turn your opacity:0.5; into

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

Which should help for Internet Explorer

Upvotes: 2

Related Questions