Search code examples
htmlcssmargincenter

Can't center this absolute element

I'm currently changing a PSD design to a HTML site. I've come into an issue however. I am unable to center a certain element. I've tried all the usual tricks.

http://lowhop.net/

See here the main blue header is out of line (not centered). I tried

#slider{ position:absolute; left:0; right:0; margin-left:auto; margin-right:auto;

Before, however it didn't work reliably. (Appeared only to work on my screen resolution/browser).

Thanks

Solution

  • Since you explicitly set the width of the slider DIV, you can use another trick to center it:

    #slider 
{
  z-index: 2;
  background-image: url(../img/sliderbg_09_09.png);
  position: absolute;
  display: block;
  width: 982px;
  height: 251px;
  left: 50%;
  margin-left: -491px; /** half DIV width */
}

    I'd probably steer away from having this as a position absolute DIV, doesn't look like it needs it but that's a quick and dirty centering :)

    Hope that helps