Centering a DIV element

[Don Dean]

Hi all,
I'm familar with Relative and Absolute positioning of DIV elements.

Is there a simple way, maybe with a tag, to center a DIV element in the
center (left to right) of a page without using Absolute positioning. I want
to position it Relative so it will move in relation to a particular paragraph
of text.

 

[Kevin Spencer]

Hi Don,

You can do it with an attribute: align="center"

The following link is my "Bible" for DHTML Objects:

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects.asp

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Neither a follower nor a lender be.

 

[Murray]

Just to expand a tiny bit on Kevin's suggestion, a div is a block tag. This
means that it a) starts on a new line, b) expands to fill its container, c)
forces adjacent content to a new line below, and d) is rendered in the
normal flow (unless it is absolutely positioned). It is implicity styled
with position:static. This means that it will be placed on the page
exclusively by its location in the flow of the code.

Considering (b), merely assigning a div an alignment of "center" may have no
visible effect on its placement, since it has expanded to fill its
container's width. You would also have to apply some width to the div to
see anything happen, e.g.,

<div style="width:200px;margin:0 auto;">this content will center in any
container wider than 200px.</div>

Considering (d), any non-positioned div with a width and auto margins (left
and right) will be centered with its position dependent on the preceding
code.

You would not need to use relative positioning to achieve this at all. Does
that answer your question?

center a DIV element in the
center (left to right) of a page without using Absolute positioning.

For what it's worth, you would never use absolute positioning to center
anything.

 

[Don Dean]

Hey Kevin,
I tried the align="center" inside the DIV tag and it didn't center the DIV
element (which is what Murray said might happen) although it did cause the
center alignment of the contents of the DIV element.
I tried several different things and here's what finally worked:

<center><div style="position: relative; width: 200px; height: 30px; border:
2px solid #000000; background-color: #CCCCFF">
My text is here.</div></center>

Thanks for the msdn page address, I will be checking it out often.
Have a good one.
--
Don
*********

Hi Don,

You can do it with an attribute: align="center"

The following link is my "Bible" for DHTML Objects:

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects.asp

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Neither a follower nor a lender be.

 

[Don Dean]

Hi Murray,
You were right, I tried the align="center" inside the DIV tag, as Kevin
suggested, but it didn't center the DIV element, although it did cause the
center alignment of the contents of the DIV element. This is not what I was
looking for, I wanted to center the DIV element and not the contents.

I tried several different things and here's what worked:

<center><div style="position: relative; width: 200px; height: 30px; border:
2px solid #000000; background-color: #CCCCFF">My text is here.</div></center>

Thanks for the additional info.,
--
Don
*********

Just to expand a tiny bit on Kevin's suggestion, a div is a block tag. This
means that it a) starts on a new line, b) expands to fill its container, c)
forces adjacent content to a new line below, and d) is rendered in the
normal flow (unless it is absolutely positioned). It is implicity styled
with position:static. This means that it will be placed on the page
exclusively by its location in the flow of the code.

Considering (b), merely assigning a div an alignment of "center" may have no
visible effect on its placement, since it has expanded to fill its
container's width. You would also have to apply some width to the div to
see anything happen, e.g.,

<div style="width:200px;margin:0 auto;">this content will center in any
container wider than 200px.</div>

Considering (d), any non-positioned div with a width and auto margins (left
and right) will be centered with its position dependent on the preceding
code.

You would not need to use relative positioning to achieve this at all. Does
that answer your question?

center a DIV element in the
center (left to right) of a page without using Absolute positioning.

For what it's worth, you would never use absolute positioning to center
anything.

 

[Murray]

Pah - throw it out. Here's all you need -

<div style="width: 200px; height: 30px; border:2px solid #000000;
background-color: #CCF; margin:0 auto;">My text is here.</div>


--
Murray
============

Hi Murray,
You were right, I tried the align="center" inside the DIV tag, as Kevin
suggested, but it didn't center the DIV element, although it did cause the
center alignment of the contents of the DIV element. This is not what I
was
looking for, I wanted to center the DIV element and not the contents.

I tried several different things and here's what worked:

<center><div style="position: relative; width: 200px; height: 30px;
border:
2px solid #000000; background-color: #CCCCFF">My text is
here.</div></center>

Thanks for the additional info.,

 

[Don Dean]

Yep, your way works too.
Thanks Murray, you've always got the answers.

 

[Kevin Spencer]

Murray knows a lot more about HTML than I ever will. Any time he makes an
addendum to my comments (or anyone else's, for that matter) a good policy
would be to defer to Murray!

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Neither a follower nor a lender be.

 

[Murray]

Heh - I'm just fast with the reference books! 8)

Thanks, Kev....

 

[Murray]

Yippee! Good guess, huh? 8)

 

[Uncle Joe]

Excellent reference. Thanks.

Hi Don,

You can do it with an attribute: align="center"

The following link is my "Bible" for DHTML Objects:

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects.asp

--
HTH,

Kevin Spencer
Microsoft MVP
.Net Developer
Neither a follower nor a lender be.