为什么HTML中不推荐使用<center>标签?</center>

时间:2009-11-25 18:00:49

标签: html tags center deprecated

我很好奇为什么HTML中的<center>标记已被弃用。

<center>是一种通过将容器封装在<center>标记中来快速居中对齐文本和图像块的简单方法,我现在找不到任何更简单的方法来解决这个问题

任何人都知道如何集中“东西”(不是margin-left:auto; margin-right:auto;和宽度的东西)的任何简单方法,取代<center>?而且,为什么它被弃用?

18 个答案:

答案 0 :(得分:221)

<center>元素已被弃用,因为它定义了其内容的表示 - 它没有描述其内容。

一种居中方法是将元素的margin-leftmargin-right属性设置为auto,然后将父元素的text-align属性设置为{{1} }。这保证了元素将在所有现代浏览器中居中。

答案 1 :(得分:73)

HTML 就是为内容提供结构和含义,这应该是唯一功能

但是,愚蠢的浏览器开发人员过去添加了各种标签,这违反了这一基本原则。

在某些时候,人们会(部分地,至少)感觉到,并且开始(尝试)同意编写正确的HTML的规范,因此他们弃用了这些标签。

然而,损害已经完成 - 太多人已经学习HTML作为“把东西和东西放在标签周围”,而不是理解语义和演示之间的(重要和有用)区别,而那些人已经继续写书和教程,教别人错误的写HTML方式,他们自己做了同样的事情,我们最终得到了一个正确的老混乱。

理想情况下,center标记应该永远不存在,因为人们应该指出它不是'真正的'HTML,并告诉浏览器制作者回去做正确的。


并且为了正确地进行...对齐当然是一个演示问题 - 将布局和格式应用于(结构化)内容 - 并且用于此的语言是 CSS

然而,再次,愚蠢的浏览器开发人员搞砸了早期的CSS - 在许多情况下,创建网页的人不得不使用不正确的HTML,因为CSS根本不起作用。

现在,我们开始以便为CSS添加一些有用的功能,但仍有很多未实现的功能,而且还有很多东西可以在远远优于方式,但现在已经标准化,所以我们坚持旧的方式。

如果样式表是由明智的人实现的,那么你可以在任何体面的办公软件中拥有所有控件 - 对齐块和文本,它可以水平,垂直,倒置,旋转等工作 - 并且不会以愚蠢的方式将左/右边距设置为自动。


为了完整起见,我会快速添加网页的第三个“级别”,其中涉及将交互性添加到其他静态页面,这当然是(错误命名的) JavaScript

然而,那些愚蠢的浏览器开发人员并不知道他们在做什么。他们选择了一个完全不准确/无效的名称(出于营销原因),并且再次充斥着一种潜在的强大而强大的语言,其中存在缺陷,缺乏功能,并创造了一些(直到最近)被许多人憎恨的东西。

我们当然在过去的几年中看到了JavaScript库的大起义,这有助于展示JS多年来能够提供的一些很酷的东西,隐藏了浏览器中仍然存在的许多浏览器漏洞,并且部分帮助修补CSS支持,因此它更有用(尽管仍然有很多东西丢失)。


所以是的,总结一切,最终的答案是因为浏览器制造商是愚蠢的。 :)

答案 2 :(得分:16)

我所做的是采取中心或浮动等常见任务,并从中制作CSS类。当我这样做时,我可以在任何页面中使用它们。我也可以在同一个元素上调用我想要的数量。

.text_center {text-align: center;}
.center {margin: auto 0px;}
.float_left {float: left;}

现在我可以在我的HTML代码中使用它们来执行简单的任务。

<p class="text_center">Some Text</p>

答案 3 :(得分:16)

根据W3Schools.com

  

在HTML 4.01中不推荐使用center元素,XHTML 1.0 Strict DTD不支持。

HTML 4.01 spec给出了弃用标记的原因:

  

CENTER元素完全等同于指定DIV元素,并将align属性设置为“center”。

答案 4 :(得分:10)

如果您愿意,仍然可以将其与XHTML 1.0 TransitionalHTML 4.01 Transitional一起使用。唯一的另一种方式(在我看来,最好的方式)是利润率:

<div style="width:200px;margin:auto;">
  <p>Hello World</p>
</div>

您的HTML应定义元素,而不是管理其演示文稿。

答案 5 :(得分:9)

我仍然使用&lt; center&gt;标签有时因为CSS中的任何内容都不起作用。尝试使用&lt; div&gt;的示例伎俩和失败:

<div style="text-align: center;">This div is centered, but it's a simple example.</div>
<br />
<div style="text-align: center;"><table border="1"><tr><td>&lt;div style="text-align: center;"&gt; didn't center correctly.</td></tr></table></div>
<br />
<div style="text-align: center;margin-left:auto;margin-right:auto"><table border="1"><tr><td>&lt;div style="text-align: center;margin-left:auto;margin-right:auto"&gt; still didn't center either</td></tr></table></div>
<br />
<center><table border="1"><tr><td>Actually Centered with &lt;center&gt; tag</td></tr></table></center>

&LT;中心],[得到结果。要使用CSS,有时候你必须把CSS放在几个地方并把它弄得乱七八糟才能让它居中。为了回答你的问题, CSS已成为信徒和追随者的宗教,他们避开&lt; center&gt; &LT b取代; &LT; I&GT; &LT; U&GT;亵渎,不圣洁,为了自己的工作安全而过于简单。如果他们试图把你的&lt; table&gt;远离你,问他们colspan或rowspan属性的CSS等价物是什么。

这不是抽象或书呆子的真理,而是重要的生活真理。
- 禅

答案 6 :(得分:8)

标记即HTML标记代表意义和结构,而不是外观。它在HTML的早期版本中非常混乱,但人们现在正试图清理它的标准。

让标签控制外观的一个问题是,您的网页无法与残疾人设备(例如屏幕阅读器)配合使用。它还会导致你的文本中有很多很多标签,这些标签无助于澄清其含义,而是将其与不同级别的信息混为一谈。

因此,CSS被认为是将格式/显示移动到另一种语言,这种语言与文本是分开的,并且可以很容易地保持这种方式。除此之外,这允许切换样式表以改变网页的外观而不触及其他标记。并且能够在一个膨胀的泡沫中为许多页面做到这一点。

CSS为您提供的工具并不总是很优雅,我就在您身边。例如,没有办法进行有效的垂直居中。水平居中,如果它不仅仅是text-align的文字,也不是更好。

您可以选择轻松,有效,混乱或干净,优雅和笨重。我不明白为什么Web开发人员忍受这个烂摊子,但我想他们很高兴至少有机会完成他们的工作。

答案 7 :(得分:6)

HTML用于构建数据,而不是控制布局。 CSS旨在控制布局。您还会发现许多设计师因为同样的原因而不得不使用<table>进行布局。

答案 8 :(得分:4)

对于文字和图片,您可以使用text-align

<div style="text-align: center;">
    I'm centered.
</div>

答案 9 :(得分:3)

CSS有一个text-align: center属性,因为这纯粹是一个视觉事物,而不是语义,它应该降级为CSS,而不是HTML。

答案 10 :(得分:3)

深思熟虑:文字转语音合成器会对<center>做什么?

答案 11 :(得分:1)

IMO中心标签非常适合某些事情,并且从HTML的诞生开始就已经发挥作用,并将继续工作多年。

当然,除了中心标签之外,其他大多数方法还有其他方法可行。另外需要注意的是,当你在中心标签内居中时,中心标签之外的任何东西在大多数情况下都会在前后换行。

答案 12 :(得分:1)

它与其他标记一起被弃用,例如<font>作为样式元素。它没有定义元素是什么,而是改变它的外观。 W3C希望保持HTML5元素只定义元素并删除所有样式元素,以便所有样式都在页面的CSS<style>中完成。

快速修复:

    <style> 

      .element {
         position: relative;
         left: 50%;
         -webkit-transform: translateX(-50%);
         -moz-transform: translateX(-50%);
         transform: translateX(-50%);
      }

    </style>

答案 13 :(得分:1)

这是最受欢迎的答案:)

“已弃用”并不意味着“不好”,并且 center 与具有text-align:center的div不同。即使是这样,使用 center 绝对是有意义的,因为它描述得很清楚并且没有伤害任何人。

让我对

的一些观点做出反应。

“它描述的是呈现方式,而不是语义!”
否。它描述了周围环境中的逻辑排列,并且具有默认的视觉居中行为。就像

描述了一个段落,而

    描述了一个列表。默认情况下,它们具有某种外观。随时重新定义它。

    “无效”
    是的。它已被弃用,例如“稍后可以删除”。但是它已经过时了十多年了,现在仍然在这里。

    “ HTML5不支持”
    不错的尝试。 Check this.

    “这是过时的/愚蠢的/笨拙的/ me脚的”
    都不是。这就像一把锤子:如果您知道自己在做什么,就没有理由不使用它。是的,锤子可以杀死,但前提是使用错误的方式。对于指甲,这只是完美的工具,它就是为此而生。即使我们今天有更好的工具,它也是其中的一个。

    “这些事情应该由CSS完成!总是!”
    可以通过CSS实现。但是拥有一种方法并不意味着这是唯一的方法。任何受支持的,可操作的和可读的内容都应该可以使用。

    TLDR:不要使用中心标签,因为人们讨厌它。

答案 14 :(得分:0)

如果您要更新具有中心标记的旧网站,则以下解决方案在许多情况下可能无效

  

居中的方法是设置左边距和右边距   要将元素的属性设置为auto,然后设置父元素的属性   text-align属性为中心。

以下方法将为您提供标记的完全等效项:

.center{
    text-align: center;
    display: inherit;
}

.center > div { /* It is the fix if there are any div tag inside center tag */
    margin-left: auto;
    margin-right: auto;
}
<span class="center">
Content
</span>

强文

答案 15 :(得分:0)

您可以将此添加到CSS并使用<div class="center"></div>

.center{
  text-align: center;
  margin: auto;
  justify-content: center;
  display: flex;
}

或者如果您想保留<center></center>并准备好将其删除,请将其添加到CSS中

center{
  text-align: center;
  margin: auto;
  justify-content: center;
  display: flex;
}

答案 16 :(得分:-2)

中心标签不再使用只需使用此

<div style="margin:0 auto">
  <!--contents goes here-->
</div>

以其他方式

<强> CSS

.centerclass{
    margin:0 auto;
 }

<强> HTML

<div class="centerclass">
  <!--Contents goes here-->
</div>

答案 17 :(得分:-2)

标签在html标准中不被弃用 - 至少是大多数浏览器接受的标准html。相反,某些人将我们自己设定为互联网上的某种权威(并且不是当选的,也不是以任何其他方式对我们负责任何其他管理机构)告诉我们他们已经决定我们不得使用某些标签,因为他们不喜欢不喜欢我们使用它们。

但在现实世界中,只要有大量网站仍在使用这些标签,浏览器就必须继续支持这些标签。

就像狼和三只猪一样 - 它们可以喘气,上下跳跃,大喊大叫我们不能使用这些标签,但在现实世界中 - 浏览器遵循用户的需求,因此它们将继续在可预见的未来支持中心。

因此,不使用它们的唯一原因是,如果您是被迫将自由提交给那些认为自己拥有互联网的群体的自由的人之一。