Centering an image?

Mobile
1

the site

looks good on a desktop. But If I see what it looks on a smart phone, the logo is not centered,
I think its because of this

#logo {
height: 125px;
width: auto;
margin-left: 40%;
margin-bottom: -20px;
z-index: 20000000;
position: absolute;
}

But I tried putting margin-left: auto; margin-right: auto;
in the margin-left: 40% place, but the image goes to the left
How can I center it, even on mobile devices?

2

First of all, lol at that z-index value.

Second, you can do something like this

#logo {
  height: 125px;
  width: 155px;
  left: 0;
  margin: 0 auto -20px;
  right: 0;
  z-index: 20000000;
  position: absolute;
}

I gave a width to logo, since it’s just the image there. And it never resizes.

Now, that is half the equatin. Now it’ll center within #main-header. Which has a 960px width forever. That width needs to be removed. 99% of the time, you don’t want to set widths on containers.

3

But if I remove the width on #main-header, the menu (#top-categories) snaps to the left, (which I cant seem to center) also the #top-navigation also moves. How can I keep those 2 elements in the same place though?

4

Just make it max-width. That way it’ll scale as the page resizes.

5

thanks

6

You’re welcome!

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.