How do I center text within the window?

[Doctor Q]

I have a web page with two div sections, each with position:absolute (so I can put them just where I want them vertically) and a sentence of text. (This is a simplified case of the real page I am working on.)

I want the second sentence to be centered right-left in the width of the window, so it will adjust to stay centered if you change the window width.

However, as written, the text of the second sentence centers in the actual width of the first sentence, i.e., the width used, not the width available.

I get this (ignore the underscores):

<-------------------------- window width -------------------------->
This is the first sentence that I want to display.

___________________Center me.​

when I wanted this:

<---------------------------- window width ----------------------->
This is the first sentence that I want to display.

_______________________________Center me.​

Here's the code in question:

<div style="position:absolute;top:50px">
This is the first sentence that I want to display.
</div>

<div style="position:absolute;top:150px">
<center>
Center me.
</center>
</div>

I haven't found a way to do what I want, despite reading CSS documentation and doing experiments with margin, width, border, and padding settings in the style.

What's the little secret I'm missing?

 

[Littleodie914]

Hmm... I didn't know you could use <center> tags? Try doing something like this for that second sentence:

<div style="top: 150px;">
<p align=center>
Center me.
</p align=center>
</div>

Edit: Bah... scratch that, doesn't work... I'll be back later with something

Edit 2: There we go. Make sure you use the <p align=center> tag, and don't forget to take the position:absolute out of the second sentence.

 

[Doctor Q]

Thanks for responding. That produces the same result.

<div style="position:absolute;top:50px">
This is the first sentence that I want to display.
</div>

<div style="position:absolute;top:150px">
<p align="center">
Center me.
</p>
</div>

Result:

<-------------------------- window width -------------------------->
This is the first sentence that I want to display.

___________________Center me.​

According to section 10.3.3 of the CSS definition, setting both margin-left and margin-right to auto should center the text within the containing box, and I would think both div's are within the window as their containing box, but it acts more like the width of the first div is inherited by the second div. When I add margin-left:auto;margin-right:auto (with or without center or p align="center"), then the second sentence comes out left justified - no centering at all!

<div style="position:absolute;top:50px">
This is the first sentence that I want to display.
</div>

<div style="position:absolute;top:150px;margin-left:auto;margin-right:auto">
<p align="center">
Center me.
</p>
</div>

Result:

<-------------------------- window width -------------------------->
This is the first sentence that I want to display.

Center me.​

 

[Doctor Q]

I found something that seems to work:

<div style="position:absolute;top:150px;width:100%">
<p align="center">
Center me.
</p>
</div>

or this:

<div style="position:absolute;top:150px;width:100%" align="center">
Center me.
</div>

which centers within the window as I want, but has a new odd symptom. In Safari it produces horizontal and vertical scrollbars, as if my text didn't fit. Huh?? If I reduce it to width:98% then the scrollbars disappear. So that works, but still leaves me puzzled.

<div style="position:absolute;top:150px;width:98%" align="center">
Center me.
</div>

 

[scem0]

with the auto left and right margins it should center it if you put 'text-align: center;" in the parent division.

Good luck,

scem0

 

[Doctor Q]

with the auto left and right margins it should center it if you put 'text-align: center;" in the parent division.

Thanks, scem0. Here's more useful info I've come across: link

 

[deputy_doofy]

I have a web page with two div sections, each with position:absolute (so I can put them just where I want them vertically) and a sentence of text. (This is a simplified case of the real page I am working on.)

I want the second sentence to be centered right-left in the width of the window, so it will adjust to stay centered if you change the window width.

However, as written, the text of the second sentence centers in the actual width of the first sentence, i.e., the width used, not the width available.

I get this (ignore the underscores):

<-------------------------- window width -------------------------->
This is the first sentence that I want to display.

___________________Center me.​

when I wanted this:

<---------------------------- window width ----------------------->
This is the first sentence that I want to display.

_______________________________Center me.​

Here's the code in question:

<div style="position:absolute;top:50px">
This is the first sentence that I want to display.
</div>

<div style="position:absolute;top:150px">
<center>
Center me.
</center>
</div>

I haven't found a way to do what I want, despite reading CSS documentation and doing experiments with margin, width, border, and padding settings in the style.

What's the little secret I'm missing?

You touched on the answer later in this thread.
Your first div tag surrounds the sentence:
This is the first sentence that I want to display.
Because you did not specify the width of the div tag, the div becomes the length of the sentence.
Therefore, the second div tag, which is inside the first div tag, centers itself based on the outer div, not the screen.

I'm not 100% perfect at manipulating div tags yet, but I'm starting to understand them better and better.

 

[Doctor Q]

Because you did not specify the width of the div tag, the div becomes the length of the sentence.
Therefore, the second div tag, which is inside the first div tag, centers itself based on the outer div, not the screen.

Thanks deputy_doofy. (I hope that isn't your given name!) Why do you say that my second div tag is inside the first div tag? The first end-div precedes the second start-div, so they seem independent, not nested, to me. But the browser seems to agree with you, making the width of the the first div apply to the second one, so I'm still puzzled.

 

[mms]

Keep in mind that align=center is deprecated in XHTML 1.0 Strict. Though it is still allowed in XHTML 1.0 Transitional and Frameset, to ensure that your design is future-proof, you want to do this centering using stylesheets (rather than in the html as <p align="center"> does)

What you would want to do is:

<div style="margin:0 auto;">

 

[deputy_doofy]

Thanks deputy_doofy. (I hope that isn't your given name!) Why do you say that my second div tag is inside the first div tag? The first end-div precedes the second start-div, so they seem independent, not nested, to me. But the browser seems to agree with you, making the width of the the first div apply to the second one, so I'm still puzzled.

I didn't notice that last time. However, I think, for whatever reason, the first div tag set the width of the page... somehow. I'm still forever learning the div tag and the weird ways in which it behaves.

Another person mentioned that align="center" is no longer valid. He is right, but I don't know enough about how to always center things without it, such as tables. Putting a table inside a div, with the div having a text-align: center, still does not center the table, so I use align="center". Of course, the center tag works as well, but I think that's deprecated as well. Confusing? It sure is.... but I'm learning more & more every day!