CODEWITHSUNDEEP
css
Terry
Terry

Reputation: 79

Centering a set of divs?

I am trying to center this JS/jquery/ajax app screen here, such that no matter what size the user's screen is, it will all remain centered. Right now it is all left-aligned:

http://www.funtrivia.com/html5/indexc.cfm?qid=361927

No matter what I try, it simply does not center. When I do manage to center the outermost div, all of the inner stuff gets messed up.

Upvotes: 2

Views: 63

Answers (3)

KyleMit
KyleMit

Reputation: 30267

A quick Google Search reveals How to Centre a DIV Block Using CSS

Use the following CSS where #content is the id of your main div element

#content {
    margin-left: auto ;
    margin-right: auto ;
}

The technique works because when both margins are set to auto, web browsers are required by the CSS standard to give them equal width.

jsFiddle

Upvotes: 0

knguy
knguy

Reputation: 11

Remove the width settings on your body tag

Use "margin: 0 auto" on your gameheader and game divs

and set your gameheader div and game div to use position:relative

Upvotes: 1

mkoryak
mkoryak

Reputation: 57988

your html is built wrong. everything seems to be positioned absolute and has a left/top defined. It does not help that your body tag has width: 790px;

This can be solved with just css. Try removing all the positioning styles from the markup and set #game to be margin: 0 auto (the centering trick)

Upvotes: 2

Related Questions