centering

#1

I'm using the following method to center a page horizontally using CSS with
a container div:

body {
text-align: center;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
margin: 0px;
}
..center {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
}
#container {
width: 790px;
visibility: visible;
z-index: 1;
position: relative;
}

My question is whether there is a difference or any problems caused by not
setting absolute positioning for the the divs within the container div? For
example:

<body>
<div id="container" class="center">
<div><img src="images2/P3.gif"></div>
</body>

Secondly is there a way to vertically center the container div?
Thanks,
-D-

#2

Why not just do this -

body {
text-align: center;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
}
#container {
width: 790px;
visibility: visible;
z-index: 1;
position: relative;
text-align:left;
margin: 0 auto;
}

You don't need to use positioning for nested divs *UNLESS* you want them to
be located somewhere other than the flow of the code would do. As far as I
know, that's the only ramification/consideration.

Vertical centering is a challenge in CSS but you can try Gary's recent
proposal for fixed height elements -

top:50%;
top-margin:-<half the total height of the container>;

(that's a negative top margin)

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver MX
(If you *MUST* email me, don't LAUGH when you do so!)
==================
news://forums.macromedia.com/macromedia.dreamweaver - THE BEST WAY TO GET
ANSWERS
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"-D-" <noone (AT) nospam (DOT) com> wrote

Quote:

I'm using the following method to center a page horizontally using CSS
with
a container div:

body {
text-align: center;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
margin: 0px;
}
.center {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
}
#container {
width: 790px;
visibility: visible;
z-index: 1;
position: relative;
}

My question is whether there is a difference or any problems caused by not
setting absolute positioning for the the divs within the container div?
For
example:

body
div id="container" class="center"
div><img src="images2/P3.gif"></div
/body

Secondly is there a way to vertically center the container div?
Thanks,
-D-

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

centering

Macromedia Dreamweaver Macromedia Dreamweaver Discussions (macromedia.dreamweaver)

centering - 05-20-2004 , 04:57 PM

Re: centering - 05-21-2004 , 09:54 AM