tolga tolga - 2 months ago 21
CSS Question

calc() in Safari for left

I center a div within another one by using calc() function. It works fine in Chrome, Firefox, Opera and even in IE but in Safari this method doesn't work.

Any suggestions without a javascript fixation?

left: -webkit-calc(50% - 25px);
left: -moz-calc(50% - 25px);
left: calc(50% - 25px);

Answer

As Hashem said, it doesn't work in earlier versions of safari.

http://caniuse.com/calc

However if you just want to center the div, a couple ideas come to mind.

One, you could give the container a

margin-right: auto;
margin-left: auto;
width: 50%;

Or make the width whatever you like.

Second, you could give the parent div

text-align:center;

Make the child div

display: inline-block;

and/or set a width for the child div.