How to center block of text without using tables

[Mark Schneider]

I'm trying to avoid using <table> for formatting purposes where other,
reasonable means exist. I'm stuck trying to find a way to find an
equivalent for the code below.

<table align="center">
<tr>
<td>abc</td>
</tr>
</table>
The *desired* behavior I get from code above is that it horizontally
centers an entire *block* of text at the top of the page while not
requiring that the *text within* the block be centered. More
specifically:

(1) When there is less than 1 full line worth of text within the
<td> tag, the text appears horizontally centered on the screen.

(2) When there is more than one line worth of text within the <td>
(if you add text after "abc"), all the lines of text appear justified
to the left.

It seems the desirable effect results from how tables and table cells
are sized; the browsers are sizing tables and cells such that they are
horizontally as small as possible to display the text while avoiding
wrapping when avoiding is possible. Is there a way to achieve the same
results without using a table that works with IE 6, Firefox 1.1, and
perhaps Opera 8?

Thanks,
Mark Schneider

[Spartanicus]

"Mark Schneider" <go********@markschneider.com> wrote:

The *desired* behavior I get from code above is that it horizontally
centers an entire *block* of text at the top of the page while not
requiring that the *text within* the block be centered.

p{width:20em;margin-right:auto;margin-left:auto}

<p>abc</p>

--
Spartanicus

[Mark Schneider]

Thanks for the reply. Although your suggestion of setting margins to
auto and explicitly setting the width does result in the <p> block
element being centered, it does not give me the effect I mention in
item (2), which is that the *text* appears horizontally centered on the
screen. It seems that explicitly setting a width for the <p> tag
causes it to be off center. You can probably best see that it's off
center by changing the width from 20em to 30em.

-- Mark

[Spartanicus]

"Mark Schneider" <go********@markschneider.com> wrote:

Although your suggestion of setting margins to
auto and explicitly setting the width does result in the <p> block
element being centered, it does not give me the effect I mention in
item (2), which is that the *text* appears horizontally centered on the
screen.

Make up your mind as to what you want:

"while not requiring that the *text within* the block be centered. "

--
Spartanicus

[Mark Schneider]

My apologies for any confusion. I thought the 2 specific items I
listed would be clear. As item 1 points out, the effect I'm getting
with the table code is that when there is only one line of text, the
**text** appears centered on the screen. That is the visual effect I'm
getting, and that is what I'm trying to achieve without using tables.
The reason the browser giving that effect with tables is that the
browser is keeping the width of the block which contains the text as
small as possible - no bigger than the text it contains. Allow me to
rephrase the paragraph you quoted...

The *desired* behavior I get from code above is that it horizontally
centers an entire *block* of text on the screen, keeping the width of
the block no bigger than is necessary to display the text without
wrapping (if possible to display without wrapping), and the text within
the block is not centered.

Again sorry for any confusion. Can the same effect be achieved using
styles instead of a <table align="center"> ?

-- Mark

[Spartanicus]

"Mark Schneider" <go********@markschneider.com> wrote:

The *desired* behavior I get from code above is that it horizontally
centers an entire *block* of text on the screen, keeping the width of
the block no bigger than is necessary to display the text without
wrapping (if possible to display without wrapping), and the text within
the block is not centered.

Again sorry for any confusion. Can the same effect be achieved using
styles instead of a <table align="center"> ?

We'd need to know why you want that behaviour. The table in the example
you posted serves no obvious cause. The "abc" mock content also gives no
clue as to what you are actually trying to do. Providing an url to what
it is you are actually working on might help.

--
Spartanicus

[Jim Moe]

Mark Schneider wrote:

Thanks for the reply. Although your suggestion of setting margins to
auto and explicitly setting the width does result in the <p> block
element being centered, [...]

Add "text-align:center" for the <p>.
--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Mark Schneider]

Thanks for posting replies. I have tried the suggestions posted, and
none of them meets both of the specific requirements I set forth in my
original posting (in items (1) and (2)).

Understand what I'm desiring to achieve with regard to horizontal
centering. The text alignment should *appear differently* based upon
the *quantity* of text to be displayed. Note that I'm have been using
the term "appear[s]". Is it not the case that the html code I included
in my original posting (with "abc" within the <td> tag) appears
centered, yet, as I mention in the original posting, if you replace the
"abc" with more text than can be displayed on one line that the text
appears justified/aligned to the left? Try this code on your own
browser:

<html><body>
<table align="center">
<tr>
<td>The dog at the cat.</td>
</tr>
</table>
</body></html>

Then try this code in your browser:

<html><body>
<table align="center">
<tr>
<td>Rabbits hate being picked up and cuddled. Most children will want
to hug the rabbit and may end up being scratched and bitten. Most
children want cuddly pets to play with, hold, and pet on demand;
however, rabbits do not enjoy being grabbed by overeager children whose
enthusiasm can seriously injure their frail skeletons.</td>
</tr>
</table>
</body></html>

On my browser, the text in the instance ("The dog at the cat.") appears
horizontally centered, whereas the text in the second instance
("Rabbits...") appears to be left aligned. Someone replied requesting
to know why I want that behavior...I use it at the top of web pages to
display the page titles. The table code serves as a template; each
time users clicks through to a page, the web server plugs the page's
title into the <td> tag. Short titles (less than 1 line worth) appear
centered horizontally; long titles (more than 1 line worth) appear left
aligned. This is what I want. However, I want to avoid using tables
when not representing tabular data.

Thanks again for your help.

--Mark

[Spartanicus]

"Mark Schneider" <go********@markschneider.com> wrote:

[snip code examples]

An url to a real example using real content was requested, this is
always preferable over code snippets.

I use it at the top of web pages to
display the page titles. The table code serves as a template; each
time users clicks through to a page, the web server plugs the page's
title into the <td> tag. Short titles (less than 1 line worth) appear
centered horizontally; long titles (more than 1 line worth) appear left
aligned.

Several problems start to emerge despite your continued efforts to
obfuscate what you are actually trying to do, a page's title goes in the
head section (not in the body), if you are in fact referring to a page's
level 1 header then it is rather unlikely that it should contain the
length of text you used in your second example.

--
Spartanicus

[Chris Beall]

Mark Schneider wrote:

I'm trying to avoid using <table> for formatting purposes where other,
reasonable means exist. I'm stuck trying to find a way to find an
equivalent for the code below.

<table align="center">
<tr>
<td>abc</td>
</tr>
</table>
The *desired* behavior I get from code above is that it horizontally
centers an entire *block* of text at the top of the page while not
requiring that the *text within* the block be centered. More
specifically:

(1) When there is less than 1 full line worth of text within the
<td> tag, the text appears horizontally centered on the screen.

(2) When there is more than one line worth of text within the <td>
(if you add text after "abc"), all the lines of text appear justified
to the left.

(snip)
Mark,

<div style="width: 20em; margin-left: auto; margin-right: auto;">
<div style="display: table; margin-left: auto; margin-right: auto;">
<h2>abc</h2>
</div>
</div>

This works in Firefox.

It does not work in IE 6 (a short line is left-aligned), but not much
does...

The outer <div> establishes a centered box and defines its width, which
becomes the maximum width of text lines inside it.

The inner <div> does the trick you want. display: table allows the
WIDTH of this <div> to VARY, based on the width of its content, up to
the width of its containing block. Thus it is narrow if you have only a
word or two of text. It is also centered within its containing block.

The <h2> contains the content, which is, by default, left-justified. It
APPEARS to be centered, however, because its width is centered within
the outer <div>.

I would like to cite the part of the CSS spec that guarantees this
behavior, but the explanation of what the various table-related display:
properties actually MEAN seems to be rather sparse.

Cheers,
Chris

[James A. Donald]

On Wed, 21 Sep 2005 08:17:17 GMT, Spartanicus
<in*****@invalid.invalid> wrote:

"Mark Schneider" <go********@markschneider.com> wrote:

The *desired* behavior I get from code above is that it horizontally
centers an entire *block* of text on the screen, keeping the width of
the block no bigger than is necessary to display the text without
wrapping (if possible to display without wrapping), and the text within
the block is not centered.

Again sorry for any confusion. Can the same effect be achieved using
styles instead of a <table align="center"> ?

We'd need to know why you want that behaviour. The table in the example
you posted serves no obvious cause.

As he said, it causes the text to be centered.

--
http://www.jim.com

[Mark Schneider]

Chris,

Thanks for replying. It looks like in Firefox your solution achieves
the effect I'm looking for. And if I inderstand correctly, IE 6's
failure to properly treat an element styled with "display: table" the
same way IE 6 treats tables is what prevents it from achieving the same
effect.

I even tried taking your solution a little farther by adding DIVs with
"display: table-row" and "table-cell" within your DIV that has
"display:table", just so that it might appear to IE to have the same
structure as an html <table> - with no luck.

Again, big thanks to you and, Spartanicus, and James for the help.