473,840 Members | 1,574 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Which elements should be affected by text-align:center

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?

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, 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.

<html><body>
<table border=1 width=500>
<tr>
<td>
<div style="text-align:center">
<b>Using text-align:center</b>
</div>
</td>
</tr>
<tr>
<td>
<div style="text-align:center">
<img width=100 height=30 border=1>
</div>
</td>
</tr>
<tr>
<td>
<div style="text-align:center">
TEXT
</div>
</td>
</tr>
<tr>
<td>
<div style="text-align:center">
<div style="backgrou nd-color:yellow;wi dth:60px;">DIV</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="text-align:center">
<table><tr><td> table</td></tr></table>
</div>
</td>
</tr>
<tr>
<td>
<center>
<b>Using regular &lt;center&g t; tag</b>
</center>
</td>
</tr>
<tr>
<td>
<center>
<img width=100 height=30 border=1>
</center>
</td>
</tr>
<tr>
<td>
<center>
TEXT
</center>
</td>
</tr>
<tr>
<td>
<center>
<div style="backgrou nd-color:yellow;wi dth:60px;">DIV</div>
</center>
</td>
</tr>
<tr>
<td>
<center>
<table><tr><td> table</td></tr></table>
</center>
</td>
</tr>
</table>
</body></html>
Jun 27 '08 #1
13 3334
In article <g2************ *@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
Jun 27 '08 #2
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.
Jun 27 '08 #3
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.
Jun 27 '08 #4
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.
Jun 27 '08 #5
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.
Jun 27 '08 #6
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/

Jun 27 '08 #7
In article <g2************ *@news.t-online.com>, Stevo <no@mail.invali d>
wrote:
dorayme wrote:
In article <g2************ *@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 &lt;center&g t; tag</b>"

That looks like <center>!

--
dorayme
Jun 27 '08 #8
dorayme wrote:
In article <g2************ *@news.t-online.com>, Stevo <no@mail.invali d>
wrote:
>dorayme wrote:
>>In article <g2************ *@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 &lt;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.
Jun 27 '08 #9
Stevo wrote:
dorayme wrote:
>In article <g2************ *@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"
Jun 27 '08 #10

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

Similar topics

27
9268
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
26887
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.
4
2587
by: Matt Silberstein | last post by:
I would like to have a page that has some images arrange around the center. The idea is to design it for 800 wide and just allow the margins to grow on larger displays. Here is a link to an image that is what I would like, the words around the picture would be separate image in the final: www.nyccure.com/goal.html This works:
7
19338
by: Petesman | last post by:
I am trying to make a prompt that will ask the user for some input... If I just use var input = prompt("dafa") everything works fine but the box is put in the top left corner of the window. I need it to be centered so... I was doing some research on the net (never really used much JavaScript before) and was reading the only way to do this is by making your own custom prompt. In my attempts of doing so I came up with this code below. The...
2
1681
by: MK | last post by:
Hi, I don't have much experience with Javascript and have a simple question. Suppose one wants to write some text in the web page which needs to be center aligned, then how to do it? The command for writing some text is as follows if I am correct: document.write('This is some text');
7
3250
by: Alex | last post by:
Hi Everone, I need some advice on how to setup 4 columns where the outside two are absolute (120px) and the inner two (side by side) are relevent (Fluid) and change with the screen. Here's my rough layout:
3
4160
by: kpg | last post by:
Here's an easy one. I have an asp:label on a web page. How do I center the text in the label? ??? TIA kpg
6
4746
by: -Lost | last post by:
Anyone know offhand how to center a text within the bounding box of an image (width-wise at least) without the Freetype library? GD- or ImageMagick-specifc code would do nicely. -- -Lost Remove the extra words to reply by e-mail. Don't e-mail me. I am kidding. No I am not.
2
1304
MarkoKlacar
by: MarkoKlacar | last post by:
Hi! I have a problem, I want to select the number of elements within an element. All I need is the number (count), and I just want to it once for "one row" so to speak. Picture this XML file: <start-para> <heading>Head Text</heading> <heading>Some text</heading>
3
2286
by: Csaba Gabor | last post by:
I have a table with 3 rows, and two pieces of data to display in each row. However, the first element of the last two rows and the 2nd element of the 1st row are very short. This would seem to imply three columns where the first and last columns are narrow and the (implied) middle one getting the bulk of the width. <table border id=tbl> <tr><td colspan=2><nobr>This is supposed to be long</nobr></ td><td>Fred</td></tr>
0
9699
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10922
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10603
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10660
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10301
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9440
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7838
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
1
4498
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
3138
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.