473,287 Members | 1,926 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,287 software developers and data experts.

How to center block of text without using tables

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

Sep 20 '05 #1
11 5204
"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
Sep 20 '05 #2
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

Sep 20 '05 #3
"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
Sep 20 '05 #4
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

Sep 21 '05 #5
"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
Sep 21 '05 #6
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)
Sep 21 '05 #7
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

Sep 26 '05 #8
"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
Sep 26 '05 #9
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

Oct 1 '05 #10
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
Oct 2 '05 #11
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.

Oct 3 '05 #12

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

9
by: Bjoern Wolfgardt | last post by:
Hi, I have read the you should no longer use 'align="center"' when you want to center a table or something other. So I asked myself what should I use than. I found something that you should use...
27
by: FL | last post by:
Hi Everyone, I know howto center a block using margin-left: auto ; margin-right: auto ; but I'm trying to center vertically a box, any idea to solve this?
10
by: john T | last post by:
Is there anyway to vertically center a html table using css in such a way it does not alter the html table. When I tryied it just screws up.
13
by: Mike | last post by:
We are using: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"...
32
by: Axel Dahmen | last post by:
Hi, I've posted this question a few months ago but didn't get a truly satisfying answer then. So I'd like to post my question again: How can I center a DIV? The content in the DIV should be...
1
by: judacris | last post by:
I've seen the threads here about molding 2 divs in a centered fashion. but I can't seem to solve this thing. my blogger blog is functioning well on my site for now, but the blog feed (left) and...
14
by: Summercool | last post by:
in http://www.0011.com/test_size3.html to center the logo "HTML 4.01 check" button at the bottom of the page, I used <div style="width: 10px; margin: 0px auto"> </div>
24
by: GloStix | last post by:
I'm trying to center this banner, it's in a div that has the same width so it's not exactly "centering" but it's screwed up, It works in safari but in Firefox it's messed up. I uploaded a Video to...
14
by: gaijinco | last post by:
I was a hobbist web coder for years but I had to sidestep for a while. Now I'm trying to return to it and I'm trying to clarify how am I supposed to do somethings with CSS v.s. HTML and I'm...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.