209

我只是好奇为什么<center>不推荐使用 HTML 中的标签。

这<center>是一种通过将容器封装在<center>标签中来快速居中对齐文本和图像块的简单方法，我现在真的找不到任何更简单的方法来做到这一点。

任何人都知道如何将“东西”（不是margin-left:auto; margin-right:auto;和宽度的东西）居中的任何简单方法，替代的东西<center>？而且，为什么它被弃用了？

4

12 回答 12

243

该<center>元素已被弃用，因为它定义了其内容的呈现方式——它没有描述其内容。

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

于 2009-11-25T18:06:21.993 回答
18

有时我仍然使用 <center> 标签，因为 CSS 中的任何内容都不起作用。尝试使用 <div> 技巧并失败的示例：

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

<center> 得到结果。要改用 CSS，有时您必须将 CSS 放在几个地方并弄乱它以使其居中。为了回答你的问题，CSS 已经成为一种信仰，有信徒和追随者，他们为了自己的工作保障而回避 <center> <b> <i> <u> 是亵渎、不洁和过于简单的。如果他们试图把你的 <table> 拿走，问问他们 colspan 或 rowspan 属性的 CSS 等价物是什么。

重要的不是抽象的或书本式的真理，而是活生生的真理。
——禅

于 2018-01-03T17:32:24.007 回答
18

最不受欢迎的答案

  1. 不推荐使用的标签不一定是坏标签；
  2. 有处理表示逻辑的标签，就是center其中之一；
  3. center标签与带有 ; 的 div不同text-align:center。
  4. 您有另一种方法来做某事这一事实并不会使它无效。

让我解释一下，因为这里有臭名昭著的反对者会认为我在为老式 HTML4 或其他东西辩护。不，我不是。但围绕这center一点的争论只是一场趋势战争，没有真正的理由放弃一个很好地服务于有效目的的标签。

因此，让我们看看反对它的主要论点。

  • “它描述的是表示，而不是语义！”
    不，它描述了一种逻辑排列——是的，它有一个默认外观，就像其他标签<p>一样<ul>。但重点是封闭部分与其周围环境的关系。中心说“这是我们通过视觉上不同的定位来区分的东西”。

  • “它无效”
    是的。它只是被弃用，如，以后可以删除。15 年多了。显然，它不会去任何地方。有一些主要网站（包括 google.com）使用这个标签，因为它可读性很强，而且很切题——这也是我们喜欢 HTML5 标签的原因。

  • “HTML5 不支持它”
    实际上 ，它是最广泛支持的标签之一。MDN 说“不鼓励使用它，因为它可能随时被删除” - 好点，但那一天可能永远不会到来，引用经典的话。Center 在 2004 年左右已经被弃用 - 它仍然存在并且仍然有用。

  • “这是老派”
    鞋带也是老派。新方法不会使旧方法无效。你想感觉进步和现代：很好。但不要让它成为法律。

  • “这很愚蠢/尴尬/蹩脚/讲述了一个关于你的故事”
    这些都不是。它就像一把锤子：一种用于特定工作的工具。同一工作有其他工具，同一工具有其他工作；但它是为了解决某个问题而创建的，而这个问题仍然存在，所以我们不妨只使用专用的解决方案。

  • “你不应该这样做，因为，CSS”
    居中绝对可以通过 CSS 实现，但这只是一种方式，不是唯一的方式，更不用说唯一合适的方式了。任何受支持、工作和可读的东西都应该可以使用。此外，同样的论点发生在 flexbox 和 CSS 网格之前，这很有趣，因为当时没有 CSS 方法来实现 center 所做的。不，text-align:center不一样。不，margin:auto不一样。任何在 flexbox 之前反对中心标签的人都对 CSS 了解不够。

TL;博士：

不使用的唯一原因<center>是人们会讨厌你。

于 2019-09-09T19:52:15.330 回答
17

据W3Schools.com称，

在 HTML 4.01 中不推荐使用 center 元素，并且在 XHTML 1.0 Strict DTD 中不受支持。

HTML 4.01 规范给出了弃用标签的原因：

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

于 2009-11-25T18:11:33.970 回答
16

我所做的是处理一些常见的任务，比如居中或浮动，然后用它们制作 CSS 类。当我这样做时，我可以在任何页面中使用它们。我也可以在同一个元素上调用任意多个。

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

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

<p class="text_center">Some Text</p>
于 2009-11-26T04:11:07.510 回答
12

如果您愿意，您仍然可以将它与XHTML 1.0 Transitional和HTML 4.01 Transitional一起使用。唯一的另一种方式（我认为最好的方式）是利润：

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

你的 HTML 应该定义元素，而不是控制它的表现。

于 2009-11-25T18:03:29.753 回答
8

HTML 用于结构化数据，而不是控制布局。CSS旨在控制布局。您还会发现，<table>出于同样的原因，许多设计师不赞成使用布局。

于 2009-11-25T18:06:38.203 回答
8

它的目的是标记，即 HTML 标记，代表意义和结构，而不是外观。它在 HTML 的早期版本中被严重混淆，但人们现在正试图清理这些标准。

让标签控制外观的一个问题是，您的页面不能很好地与屏幕阅读器等残疾人设备配合使用。它还会导致您的文本中有大量标签，这些标签无助于阐明含义，而是将其与不同级别的信息混为一谈。

所以 CSS 被认为可以将格式/显示移动到另一种语言，这种语言与文本是分开的，并且可以很容易地保持这种方式。除其他外，这允许切换样式表以更改网页的外观，而无需触及其他标记。并且能够在一个膨胀的过程中为大量页面做到这一点。

CSS 为您提供的工具并不总是优雅的，我支持您。例如，没有办法进行有效的垂直居中。水平居中，如果它不仅仅是适合 的文本text-align，也好不到哪里去。

你可以选择做简单、有效和混乱或干净、优雅和繁琐。我不明白 Web 开发人员为什么要忍受这种混乱，但我猜他们至少有机会完成他们的工作是很高兴的。

于 2009-11-25T18:09:55.730 回答
7

对于文本和图像，您可以使用text-align：

<div style="text-align: center;">
    I'm centered.
</div>
于 2009-11-25T18:06:44.573 回答
3

CSS 有一个text-align: center属性，由于这纯粹是一种视觉上的东西，而不是语义上的，它应该归结为 CSS，而不是 HTML。

于 2009-11-25T18:07:13.630 回答
3

深思熟虑：文本到语音合成器会做<center>什么？

于 2009-11-25T23:52:34.317 回答
3

您可以将其添加到您的 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;
}
于 2019-11-17T20:19:32.243 回答