Which elements should be affected by text-align:center

**dorayme** · Jun 27 '08, 07:19 PM

Re: Which elements should be affected by text-align:center

In article <g2kdav$8ak$02$ 1@news.t-online.com>, Stevo <no@mail.invali d>
wrote:

I've found that for IE6+, if you add the property text-align:center to a
DIV, then *anything* inside it gets centered. That can be a table, an
object/embed, another DIV, an image, or some text.
>
Firefox and Safari on the other hand don't treat text-align in that way.
In my tests on those browsers, they only centers images and text. Any
DIVs, object/embeds or tables remain default unaligned and generally
appear on the left.
>
Considering that I'm trying to write my own DIV or a table inside of an
existing DIV that *might* have the text-align property set to center, is
there anything I can do to my own DIV or table to make it center if the
parent DIV has text-align:center set?

* Use a proper doctype; I would say this is good:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

* And you might care to see my latest draft of

<http://netweaver.com.a u/centring/>

* Separate out use of html content from CSS. Get as much of the
styles/presentational instructions out of your HTML.

* Try not to use deprecated things like <center>

--
dorayme

**C A Upsdell** · Jun 27 '08, 07:19 PM

Re: Which elements should be affected by text-align:center

Stevo wrote:

I've found that for IE6+, if you add the property text-align:center to a
DIV, then *anything* inside it gets centered. That can be a table, an
object/embed, another DIV, an image, or some text.
>
Firefox and Safari on the other hand don't treat text-align in that way.
In my tests on those browsers, they only centers images and text. Any
DIVs, object/embeds or tables remain default unaligned and generally
appear on the left.

As someone else said, first use a DOCTYPE which triggers standards mode.

The standards basically say that "text-align:center;" centers inline
content, not blocks.

To center a block, use "margin-left:auto, margin-right:auto;" instead.

You can use IE conditional comments to ensure that IE gets the broken
CSS it needs to center things as you expect.

**Ben C** · Jun 27 '08, 07:19 PM

Re: Which elements should be affected by text-align:center

On 2008-06-09, Stevo <no@mail.invali dwrote:

I've found that for IE6+, if you add the property text-align:center to a
DIV, then *anything* inside it gets centered. That can be a table, an
object/embed, another DIV, an image, or some text.
>
Firefox and Safari on the other hand don't treat text-align in that way.
In my tests on those browsers, they only centers images and text. Any
DIVs, object/embeds or tables remain default unaligned and generally
appear on the left.
>
Considering that I'm trying to write my own DIV or a table inside of an
existing DIV that *might* have the text-align property set to center, is
there anything I can do to my own DIV or table to make it center if the
parent DIV has text-align:center set?

You can do it with classes:

..centre { text-align: center }
..centre table, .centre div { margin-left: auto; margin-right: auto }

Then you put class="centre" on the outside div.

Here's a copy/pasteable test page that will work offline that exhibits
the scenario. You see in IE6+ that everything is aligned (the image, the
text, the table and the div). Try it in Safari or Firefox and you see
that the table and div aren't affected by the text-align property in the
parent div. I'm not saying that's wrong

It's not.

, but I'm encountering a site (or
two) that are using text-align to achieve centralization and consider
that there's something wrong with my DIV that I write into it if it's
not aligned centrally in Firefox/Safari. Now I know (or at least think)
they're wrong in that assumption, but I'm the one that needs to (a)
prove it, and (b) come up with a workaround on my end.

Proof is here: http://www.w3.org/TR/CSS21/text.html#propdef-text-align

"Left, right, center, and justify text, respectively, as described
in the section on inline formatting"

They don't align blocks.

**Stevo** · Jun 27 '08, 07:19 PM

Re: Which elements should be affected by text-align:center

dorayme wrote:

In article <g2kdav$8ak$02$ 1@news.t-online.com>, Stevo <no@mail.invali d>
wrote:
>

>I've found that for IE6+, if you add the property text-align:center to a
> DIV, then *anything* inside it gets centered. That can be a table, an
>object/embed, another DIV, an image, or some text.
>>
>Firefox and Safari on the other hand don't treat text-align in that way.
>In my tests on those browsers, they only centers images and text. Any
>DIVs, object/embeds or tables remain default unaligned and generally
>appear on the left.
>>
>Considering that I'm trying to write my own DIV or a table inside of an
>existing DIV that *might* have the text-align property set to center, is
>there anything I can do to my own DIV or table to make it center if the
>parent DIV has text-align:center set?

>
* Use a proper doctype; I would say this is good:

I don't think I can use a doctype on my DIV. All I have available to it
is style properties.

* And you might care to see my latest draft of
>
<http://netweaver.com.a u/centring/>

Thanks, I'll took a look. I think that maybe wrapping my DIV inside
another one that has align="center" and width of "100%" might be just
the ticket to align my DIV inside the outer space I'm provided.

* Separate out use of html content from CSS. Get as much of the
styles/presentational instructions out of your HTML.
* Try not to use deprecated things like <center>

I don't have any CSS in my HTML content and don't use <center>.

**Stevo** · Jun 27 '08, 07:19 PM

Re: Which elements should be affected by text-align:center

C A Upsdell wrote:

Stevo wrote:

>I've found that for IE6+, if you add the property text-align:center to
>a DIV, then *anything* inside it gets centered. That can be a table,
>an object/embed, another DIV, an image, or some text.
>>
>Firefox and Safari on the other hand don't treat text-align in that
>way. In my tests on those browsers, they only centers images and text.
>Any DIVs, object/embeds or tables remain default unaligned and
>generally appear on the left.

>
As someone else said, first use a DOCTYPE which triggers standards mode.
>
The standards basically say that "text-align:center;" centers inline
content, not blocks.
>
To center a block, use "margin-left:auto, margin-right:auto;" instead.
>
You can use IE conditional comments to ensure that IE gets the broken
CSS it needs to center things as you expect.

I think none of that can be applied to my DIV to help it achieve what I
want :( As I just said in reply to dorayme though, I might be able to
use your margin-left:auto and margin-right:auto if I wrap my DIV in
another DIV that has those properties.

**Stevo** · Jun 27 '08, 07:19 PM

Re: Which elements should be affected by text-align:center

Ben C wrote:

On 2008-06-09, Stevo <no@mail.invali dwrote:

>I've found that for IE6+, if you add the property text-align:center to a
> DIV, then *anything* inside it gets centered. That can be a table, an
>object/embed, another DIV, an image, or some text.
>>
>Firefox and Safari on the other hand don't treat text-align in that way.
>In my tests on those browsers, they only centers images and text. Any
>DIVs, object/embeds or tables remain default unaligned and generally
>appear on the left.
>>
>Considering that I'm trying to write my own DIV or a table inside of an
>existing DIV that *might* have the text-align property set to center, is
>there anything I can do to my own DIV or table to make it center if the
>parent DIV has text-align:center set?

>
You can do it with classes:
>
.centre { text-align: center }
.centre table, .centre div { margin-left: auto; margin-right: auto }
>
Then you put class="centre" on the outside div.

That's not my div though, I can't do anything to that one. I'm looking
for something I can do to *my* div. I think wrapping it with another DIV
that has a center attribute might do the trick.

I just need to figure out how to detect (in JS) if the outer DIV has
text-align set to center.

**Jukka K. Korpela** · Jun 27 '08, 07:19 PM

Re: Which elements should be affected by text-align:center

Scripsit C A Upsdell:

As someone else said, first use a DOCTYPE which triggers standards
mode.

Clarification: even triggering "standards" mode does not make IE (even
IE 7) behave as regards to align="center" or text-align: center on a
<divelement. In both modes, IE centers any inner block, in addition to
centering lines.

You can use IE conditional comments to ensure that IE gets the broken
CSS it needs to center things as you expect.

In practice, the safest way to center a block is to wrap it inside a
single-cell table that has align="center". (By the HTML specs,
align="center" centers the entire table, so this is different from
align="center" on a <divelement.)

--
Jukka K. Korpela ("Yucca")

http://www.cs.tut.fi/~jkorpela/

**dorayme** · Jun 27 '08, 07:19 PM

Re: Which elements should be affected by text-align:center

In article <g2lba2$8br$00$ 1@news.t-online.com>, Stevo <no@mail.invali d>
wrote:

dorayme wrote:

In article <g2kdav$8ak$02$ 1@news.t-online.com>, Stevo <no@mail.invali d>
wrote:

I've found that for IE6+, if you add the property text-align:center to a
DIV, then *anything* inside it gets centered. That can be a table, an
object/embed, another DIV, an image, or some text.
>
Firefox and Safari on the other hand don't treat text-align in that way.
In my tests on those browsers, they only centers images and text. Any
DIVs, object/embeds or tables remain default unaligned and generally
appear on the left.
>
Considering that I'm trying to write my own DIV or a table inside of an
existing DIV that *might* have the text-align property set to center, is
there anything I can do to my own DIV or table to make it center if the
parent DIV has text-align:center set?

* Use a proper doctype; I would say this is good:

>
I don't think I can use a doctype on my DIV. All I have available to it
is style properties.
>

Doctypes are for HTML documents not elements. Take a look at the the top
of the HTML source, for example, in the pages of the URL I supplied
below.

* And you might care to see my latest draft of

<http://netweaver.com.a u/centring/>

>
Thanks, I'll took a look. I think that maybe wrapping my DIV inside
another one that has align="center" and width of "100%" might be just
the ticket to align my DIV inside the outer space I'm provided.

If you read pages 2 and 3 of the above URL or follow Ben C's advice
(which gives a practical way), you will be able to solve this problem.
Otherwise post a URL.

>

* Separate out use of html content from CSS. Get as much of the
styles/presentational instructions out of your HTML.
* Try not to use deprecated things like <center>

>
I don't have any CSS in my HTML content and don't use <center>.

Take a look at your first post and the mass of code you included:

<div style="text-align:center">

That is what I meant. It is not a crime. It is just that you will
probably benefit from using classes and putting all your CSS in the head
or in an external style sheet.

And you have:

"<td>
<center>
<b>Using regular <center&g t; tag</b>"

That looks like <center>!

--
dorayme

**Stevo** · Jun 27 '08, 07:19 PM

Re: Which elements should be affected by text-align:center

dorayme wrote:

In article <g2lba2$8br$00$ 1@news.t-online.com>, Stevo <no@mail.invali d>
wrote:

>dorayme wrote:

>>In article <g2kdav$8ak$02$ 1@news.t-online.com>, Stevo <no@mail.invali d>
>>wrote:
>>>
>>>I've found that for IE6+, if you add the property text-align:center to a
>>> DIV, then *anything* inside it gets centered. That can be a table, an
>>>object/embed, another DIV, an image, or some text.
>>>>
>>>Firefox and Safari on the other hand don't treat text-align in that way.
>>>In my tests on those browsers, they only centers images and text. Any
>>>DIVs, object/embeds or tables remain default unaligned and generally
>>>appear on the left.
>>>>
>>>Considerin g that I'm trying to write my own DIV or a table inside of an
>>>existing DIV that *might* have the text-align property set to center, is
>>>there anything I can do to my own DIV or table to make it center if the
>>>parent DIV has text-align:center set?
>>* Use a proper doctype; I would say this is good:

>I don't think I can use a doctype on my DIV. All I have available to it
>is style properties.

>
Doctypes are for HTML documents not elements. Take a look at the the top
of the HTML source, for example, in the pages of the URL I supplied
below.

I don't have control over the HTML document. I'm controlling a library
JS function that will inject a DIV into a specific place. I'm not
allowed to change the page or the outer DIV. All I can control is what I
write into that outer DIV :(

>>* And you might care to see my latest draft of
>>>
>><http://netweaver.com.a u/centring/>

>Thanks, I'll took a look. I think that maybe wrapping my DIV inside
>another one that has align="center" and width of "100%" might be just
>the ticket to align my DIV inside the outer space I'm provided.

>
If you read pages 2 and 3 of the above URL or follow Ben C's advice
(which gives a practical way), you will be able to solve this problem.
Otherwise post a URL.

Unfortunately I don't have a URL because I don't have a site I'm working
on, just a library function. That's why I threw together that example
HTML that was built just to exhibit the problem I was describing.

>>* Separate out use of html content from CSS. Get as much of the
>>styles/presentational instructions out of your HTML.
>>* Try not to use deprecated things like <center>

>I don't have any CSS in my HTML content and don't use <center>.

>
Take a look at your first post and the mass of code you included:
>
<div style="text-align:center">
>
That is what I meant. It is not a crime. It is just that you will
probably benefit from using classes and putting all your CSS in the head
or in an external style sheet.
>
And you have:
>
"<td>
<center>
<b>Using regular <center&g t; tag</b>"
>
That looks like <center>!

Yeah but that's just a simplest example case to exhibit the problem. I
wouldn't want to post hundreds or thousands of lines of code, and/or
post/attach numerous files, when a simple example snippet will do the
job. The <centerusage was there just to illustrate that a DIV is
center aligned by that tag, but it's not centered by a
text-align:center. Same goes for the inline style code. It's easier to
follow than including a separate CSS file.

**Stevo** · Jun 27 '08, 07:19 PM

Re: Which elements should be affected by text-align:center (got it

Stevo wrote:

dorayme wrote:

>In article <g2kdav$8ak$02$ 1@news.t-online.com>, Stevo
><no@mail.inval idwrote:

>>Considering that I'm trying to write my own DIV or a table inside of
>>an existing DIV that *might* have the text-align property set to
>>center, is there anything I can do to my own DIV or table to make it
>>center if the parent DIV has text-align:center set?

>

>* And you might care to see my latest draft of
><http://netweaver.com.a u/centring/>

>
Thanks, I'll took a look. I think that maybe wrapping my DIV inside
another one that has align="center" and width of "100%" might be just
the ticket to align my DIV inside the outer space I'm provided.

I got it now. I just need to wrap my DIV inside another one that has
align="center" and that does the trick as shown here. The first table
row has a DIV that won't center in FF/Safari but will in IE. The second
row (with the extra align=center div level) does align in all :-)

<html><body>
<table border=1 width=500>
<tr>
<td>
<div id="outerdiv" style="text-align:center">
<div style="backgrou nd-color:yellow;wi dth:60px;">DIV1 </div>
</div>
</td>
</tr>
<tr>
<td>
<div id="outerdiv" style="text-align:center">
<div align="center">
<div style="backgrou nd-color:yellow;wi dth:60px;">DIV2 </div>
</div>
</div>
</td>
</tr>
</table>
</body></html>

I haven't figured out yet how to determine (in JS) whether the outerdiv
has text-align:center but in IE and Firefox it's easy enough.

IE:
document.getEle mentById("outer div").currentSt yle.textAlign== "center"
FF:
(document.defau ltView.getCompu tedStyle(docume nt.getElementBy Id("outerdiv"), "")).textAlign= ="center"

**Stevo** · Jun 27 '08, 07:19 PM

Re: Which elements should be affected by text-align:center

Jukka K. Korpela wrote:

In practice, the safest way to center a block is to wrap it inside a
single-cell table that has align="center". (By the HTML specs,
align="center" centers the entire table, so this is different from
align="center" on a <divelement.)

Oh, so my wrapping my DIV inside another one that has align=center on
it, is not as good as wrapping my DIV inside a single cell table with
align=center. Just tried it. I like the result even better, thanks :)

<html><body>
<table border=1 width=500>
<tr>
<td>
<div style="text-align:center">
<div style="backgrou nd-color:yellow;wi dth:60px;">DIV1 </div>
</div>
</td>
</tr>
<tr>
<td>
<div id="outerdiv" style="text-align:center">
<div align="center">
<div style="backgrou nd-color:yellow;wi dth:60px;">DIV2 </div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div id="outerdiv" style="text-align:center">
<table align="center"> <tr><td>
<div style="backgrou nd-color:yellow;wi dth:60px;">DIV2 </div>
</td></tr></table>
</div>
</td>
</tr>
</table>
</body></html>

**dorayme** · Jun 27 '08, 07:19 PM

Re: Which elements should be affected by text-align:center (got it :))

In article <g2lecp$e20$00$ 2@news.t-online.com>, Stevo <no@mail.invali d>
wrote:

Stevo wrote:

dorayme wrote:

In article <g2kdav$8ak$02$ 1@news.t-online.com>, Stevo
<no@mail.invali dwrote:
>Considering that I'm trying to write my own DIV or a table inside of
>an existing DIV that *might* have the text-align property set to
>center, is there anything I can do to my own DIV or table to make it
>center if the parent DIV has text-align:center set?

* And you might care to see my latest draft of
<http://netweaver.com.a u/centring/>

Thanks, I'll took a look. I think that maybe wrapping my DIV inside
another one that has align="center" and width of "100%" might be just
the ticket to align my DIV inside the outer space I'm provided.

>
I got it now. I just need to wrap my DIV inside another one that has
align="center" and that does the trick as shown here.

Well, you are not quite on to the idea of getting by with CSS but if you
are happy, so be it.

--
dorayme

**dorayme** · Jun 27 '08, 07:19 PM

Re: Which elements should be affected by text-align:center

In article <g2le22$1gs$03$ 1@news.t-online.com>, Stevo <no@mail.invali d>
wrote:

Doctypes are for HTML documents not elements. Take a look at the the top
of the HTML source, for example, in the pages of the URL I supplied
below.

>
I don't have control over the HTML document. I'm controlling a library
JS function that will inject a DIV into a specific place. I'm not
allowed to change the page or the outer DIV. All I can control is what I
write into that outer DIV :(

OK, I was not aware of this. You are, then, indeed hampered.

Centring things for the web is a tricky business because of browser
differences and because of the lack of one to one correspondence between
the HTML presentational methods and the CSS ones.

It might be best to simply rely on CSS and get to know how to deal with
difficult browsers like IE6. With IE6, one can deliver things for its
eyes only via conditional comments in the HTML.

--
dorayme

Which elements should be affected by text-align:center

Which elements should be affected by text-align:center

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment