<center> 标签已弃用 - 没有完美的替换 [关闭]答案

【问题标题】：<center> tag deprecated - No perfect replace [closed]<center> 标签已弃用 - 没有完美的替换 [关闭]
【发布时间】：2016-10-18 06:52:16
【问题描述】：

我正在运行一个带有基本 HTML5 和 CSS 的简单网站。（没有 CMS 或其他任何东西，只有 20 年前的老式网页设计）

为了让事情变得漂亮（并针对移动设备进行了优化），我经常使用<center> 标签来...嗯...使事情居中。

现在我经常读到标签即将被放弃。它仍然可以工作（至少对于 Chrome 和 Firefox），但天知道它还能工作多久。

W3Schools 等许多论坛和编码门户网站已经发布了使用样式变量或 CSS 的替代解决方案。

新解决方案：<div style="text-align:center">Random center text... Bla bla, Boohoo...</div>

很遗憾，它不适用于我的网站...

内联样式 (<div style="text-align:center">) 方法和 CSS 方法 (<style>#coolcenterdude{text-align:center}</style><div id="coolcenterdude">) 都不起作用，即使对外部 CSS 文档执行此操作也不起作用。就像我试图居中的对象忽略了 text-align 参数一样。

有什么帮助吗？

<center> 仍然可以正常工作，但我不希望我的网站在标签最终失去支持时被搞砸。

【问题讨论】：

如果您想以明确的宽度使表格或块居中，请使用margin: 0 auto。
你能提供你使用它的代码吗？根据我的经验，text-align: center 工作正常，只要记住它使文本相对于 div 居中，而不是页面。
我没有使用任何表格。我的网站 99% 都来自 div。

标签： css html center

【解决方案1】：

据我了解，您正在寻找一种使网站居中的方法，因此您需要使用 margin:auto 和 (max)-width

类似这样的：

body {
  /* reset default body margins */
  margin: 0
}
#wrap {
  /* choose the value that fits you better - you can use another unit besides px */
  max-width: 300px;
  /* just for demo */
  height: 100vh;
  background: green;
  /* top-bottom :0 // left-right: auto */
  margin: 0 auto;
}

&lt;div id="wrap"&gt;&lt;/div&gt;

【讨论】：

是的。这有帮助。现在 div 居中。谢谢。

【解决方案2】：

如果它是一个你试图居中的 div，则将 margin: 0 auto 赋予该 div 元素。 text-align: center 仅用于文本内容。

如果您不支持旧浏览器，您可以尝试 display flex，或者可以使用 fallbacks 并开始使用它。

【讨论】：

边距：0 自动方式有帮助。非常感谢。现在我可以删除所有中心了。

【解决方案3】：

只需将一个全局自定义类添加到您的 css，例如 centerElement 并将其添加到您想要居中的任何元素。

CSS：

.centerElement {
    text-align: center;
}

现在代替这个：

<center>
    <p>Some Random Text</p>
</center>

这样做：

<div class="centerElement">
    <p>Some Random Text</p>
</div>

【讨论】：

是的，我忘了说我尝试了这两种方法。 ID 和类。两者都不起作用。
请在 jsFiddle 中复制一个示例，以便我可以为您的问题提供更准确的解决方案。干杯
没关系。我已经得到了解决方案。 “margin：0 auto”帮助了我。但我感谢您为帮助我所做的努力。