CODEWITHSUNDEEP
htmlcsssafari
Sofia de la Cruz
Sofia de la Cruz

Reputation: 15

Image centered on chrome and firefox, but not safari

I have an image I want to put in the center of my page.

Its centered on Firefox and Chrome using this code:

html:

<div id="logo">
<img src="images/logo.png" width="80%">
</div>

Css:

#logo{

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
    z-index:1;
    text-align:center;
    background:#FFFFFF;
    border-radius:50px;


}

But when I open the page on Safari, the image is to the right of the page.

Any suggestions?

Upvotes: 0

Views: 1802

Answers (1)

user3117575
user3117575

Reputation:

You need to use browser prefixes:

transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);

According to caniuse.com, Safari is still dependent on the -webkit- prefix.

(Also, since you're new, to accept an answer you click the green button. This gives you and me reputation).

Upvotes: 2

Related Questions