哪些元素应受text-align：center的影响 [英] Which elements should be affected by text-align:center
问题描述
我发现对于IE6 +，如果你将属性text-align：center添加到
DIV，那么其中的* anything *会居中。这可以是一个表，一个
对象/嵌入，另一个DIV，一个图像或一些文本。
另一方面，Firefox和Safari不是'以这种方式处理文本对齐。
在我对这些浏览器的测试中，它们只是图像和文本的中心。任何
DIV，对象/嵌入或表格保持默认不对齐，一般
出现在左边。
考虑到我'我试图写一个我自己的DIV或一个表格里面的现有DIV * *可能*将text-align属性设置为居中，是
有什么我的如果
父DIV有text-align：center设置，可以对我自己的DIV或表做中心吗？
这里有一个副本/可以脱机工作的可粘贴测试页面，展示
场景。你在IE6 +中看到一切都是对齐的（图像，
文本，表格和div）。在Safari或Firefox中尝试它，你会看到
表格和div不受
父div中text-align属性的影响。我不是说这是错的，但是我遇到了一个使用text-align实现集中化的网站（或两个b
）并考虑
如果在Firefox / Safari中没有集中对齐，那么我写入DIV的内容有问题。现在我知道（或至少认为）
他们在这个假设中是错的，但我是那个需要（a）
证明它的人， （b）在我的最后提出一个解决方法。
< html>< body>
< table border = 1 width = 500> ;
< tr>
< td>
< div style =" text-align：center">
< b>使用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 ="文本对齐： center">
< div style =" background-color：yellow; width：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>使用常规和& LT;中心&安培; GT;标签< / 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 =" background-color：yellow; width：60px;"> DIV< / div>
< / center>
< / td>
< / tr>
< tr>
< td>
< center>
< table>< tr>< td> table< / td>< / tr>< ; / table>
< / center>
< / td>
< / tr>
< / table>
< / body>< / html>
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="background-color:yellow;width: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 <center> 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="background-color:yellow;width:60px;">DIV</div>
</center>
</td>
</tr>
<tr>
<td>
<center>
<table><tr><td>table</td></tr></table>
</center>
</td>
</tr>
</table>
</body></html>
推荐答案
在文章< g2 ************* @ news.t-online.com> ;,Stevo< no@mail.invalid>
写道：
In article <g2*************@news.t-online.com>, Stevo <no@mail.invalid>
wrote:
我发现对于IE6 +，如果你将属性text-align：center添加到
DIV，然后*里面的任何东西*都集中在一起。这可以是一个表，一个
对象/嵌入，另一个DIV，一个图像或一些文本。
另一方面，Firefox和Safari不是'以这种方式处理文本对齐。
在我对这些浏览器的测试中，它们只是图像和文本的中心。任何
DIV，对象/嵌入或表格保持默认不对齐，一般
出现在左边。
考虑到我'我试图写一个我自己的DIV或一个表格里面的现有DIV * *可能*将text-align属性设置为居中，是
有什么我的如果
父DIV有text-align：center设置，我可以对自己的DIV或表格进行设置吗？
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?
*使用正确的doctype;我会说这很好：
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 // EN"
" http://www.w3.org/TR/html4/strict.dtd">
*你可能会关心我的最新草稿
< http://netweaver.com.au/centring/>
*单独使用CSS中的html内容。从HTML中获取尽可能多的
样式/表示说明。
*尽量不要使用弃用的内容，例如< center>
-
dorayme
* 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.au/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
Stevo写道：
Stevo wrote:
我发现对于IE6 +，如果你将属性text-align：center添加到
DIV，那么*里面的*任何*都会居中。这可以是一个表，一个
对象/嵌入，另一个DIV，一个图像或一些文本。
另一方面，Firefox和Safari不是'以这种方式处理文本对齐。
在我对这些浏览器的测试中，它们只是图像和文本的中心。任何
DIV，对象/嵌入或表格保持默认不对齐，一般在左边显示
。
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.
正如其他人所说，首先使用触发标准模式的DOCTYPE。
标准基本上说文本 -align：中心;"中心内联
内容，而不是块。
要使块居中，请使用margin-left：auto，margin-right：auto;相反。
你可以使用IE条件评论来确保IE得到破坏的
CSS需要按照你的预期来固定内容。
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.
2008-06-09，Stevo< no@mail.invalidwrote：
On 2008-06-09, Stevo <no@mail.invalidwrote:
我发现IE6 + ，如果你将属性text-align：center添加到
DIV，那么*里面的任何*都会居中。这可以是一个表，一个
对象/嵌入，另一个DIV，一个图像或一些文本。
另一方面，Firefox和Safari不是'以这种方式处理文本对齐。
在我对这些浏览器的测试中，它们只是图像和文本的中心。任何
DIV，对象/嵌入或表格保持默认不对齐，一般
出现在左边。
考虑到我'我试图写一个我自己的DIV或一个表格里面的现有DIV * *可能*将text-align属性设置为居中，是
有什么我的如果
父DIV有text-align：center设置，我可以对自己的DIV或表格进行设置吗？
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?
你可以用课程来做：
..centre {text-align：center}
..中心表，.centre div {margin-left：auto; margin-right：auto}
然后你把class =" center"在外部div。
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.
这里是一个可以离线工作的复制/可粘贴测试页面，展示了场景中的b
。你在IE6 +中看到一切都是对齐的（图像，
文本，表格和div）。在Safari或Firefox中尝试它，你会看到
表格和div不受
父div中text-align属性的影响。我不是说'错了
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.
，但是我遇到了一个使用text-align来实现集中化的网站（或两个b
），并且考虑到我的DIV出了问题。如果它没有在Firefox / Safari中集中对话，我会写入它。现在我知道（或至少认为）
他们在这个假设中是错的，但我是那个需要（a）
证明它的人， （b）在我的最后提出一个解决方法。
, 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.
证明在这里： http://www.w3.org/TR/CSS21/text.html#propdef-text-align
" ;分别为左，右，中心和对齐文本，如内联格式部分所述
>
他们没有对齐块。
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.
这篇关于哪些元素应受text-align：center的影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
