0

The title and navigation bar of my website have absolute positioning so they will stay put while the images scroll under.

http://www.mikegarten.com/

I am trying to center the whole site horizontally.

I tried with this method but was unsuccessful.

I have tried to put my images into a table then centering that in a div, but then the horizontal images have empty space above and below created by the grid from vertical photos in the same row.

Is it possible to “wrap” this site, or do I need to use another approach?

2
  • 2
    Just a recommendation. It's bad practice to make everything positioned absolutely.
    – Dan Grahn
    Dec 10, 2013 at 19:00
  • 1
    ^ Agreed. Good practice is to nest any absolute items in a relative container. Dec 10, 2013 at 19:07

4 Answers 4

1

There are at least three non-deprecated ways to center something horizontally.

I recommend using the first method. You have to make sure the element you want to center has display: block, float: none and position set to normal or relative. Also it has to have limited width (less than 100 % of its parent), which is obvious.

0

You can set the left css property to 50% then add a margin-left of half the width of the element * -1, so to center your name element, set the left property to 50% and the margin-left to -132px;

#name {
    position: fixed;
    top: 20px;
    z-index: 3;
    left: 50%;
    margin-left: -132px;
}

#navtext {
    position: fixed;
    top: 105px;
    background-color: none;
    width: 1000px;
    left: 50%;
    z-index: 3;
    margin-left: -500px;
}

For your 3 columns you will need to place them in a wrapper div and set the width on it to your desired width and the margin-left and margin-right to auto.

0

You have made all the grid elements you have on your site position:absolute. That's why it won't center, because you've told it to be in an exact position. Also, it would help if you wrapped your grids in a wrapper div so you can position them as a whole.

Use width and margins. You can then use padding to space out the rest of the grid elements.

0

There is <center></center> tags in html, however I think this is outdated. the other way is to center it using CSS giving it a width and margin:auto;

1
  • 1
    Just to confirm center tags are deprecated and shouldn't be used
    – Don
    Dec 10, 2013 at 19:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.