0

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);
dippas
  • 58,591
  • 15
  • 114
  • 126
tolga
  • 2,462
  • 4
  • 31
  • 57
  • 1
    `calc()` expression is supported in Safari 6 and above (`-webkit` prefix is needed for v6.x). It doesn't work in earlier versions of Safari. – Hashem Qolami Apr 12 '14 at 20:11
  • OK thanks, than I should prefer to use something like left: 48% first as a fallback and than the others. – tolga Apr 12 '14 at 20:45

1 Answers1

1

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.

Jon Paul Miles
  • 44
  • 4