如何将页面居中？

Question

I realize that the left two containers are not as wide as my div addons but regardless I'd at least like everything to be centered with an even amount of empty space on the left and right of everything. But I can't seem to figure it out. It is a little messy I admit with all of the display: inline-block and float:left I have going on, but even the usual

margin-left:auto
margin-right:auto
width: 600px

isn't of much help to me right now. And I'd like to center without setting a random margin-left property that won't render the same at every resolution. Can anyone please assist?

The site in question is https://com-bb-dev.com.edu

Thank you for your expertise.

Answer 1

It appears that you are not laying out the page correctly.

Consider the following (LOTR reference):

1. One div to contain them all.
2. Seven divs for the dwarf-lords floating left (in their halls of stone).
3. Three divs for the elven kings floating right (under the sky).
4. These divs and more will center on your page (where the shadows lie).

Center the One div on the page and put the other divs inside this div.

Answer 2

If you just set the #loginPageContainer on the page you linked to width:600px; then it works. Just tried it myself in developer tools.

It is the wrapper-element that has to be centered. Not each div, if there are floated elements on the same "level", it will break.

Answer 3

Try this code, just change the values in it so it fit yours

div {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}