I am working on a web page that contains both
div tag to handle alignment. When I view the page in IE7 the page alignment is centered and works as expected.
When I view the page in Fire Fox, Chrome and Safari the everything on the page is pushed to the left.
My primary attribute to align the page elements is the
text-align: center; in the
body tag and the first
div tag on the page.
What can I do to fix the alignment to center all page elements through out all browsers?
Do you want to center only the main div tag? Then you should use a
margin: 0 auto on the div.
But beside that: If you want to center something with
text-align: center; that "something" must not be a block element. You can make an element a inline element using
display: inline; or
display: inline-block;. If you want to center something within a div you also have to make the div
display: table-cell; as
text-align: center; does not work on divs with