<center> 标签已弃用 - 没有完美的替换

Question

我是运行一个具有基本 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 文档执行此操作也不起作用.这就像我试图居中的对象忽略了文本对齐参数。

有什么帮助吗？

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

Answer 1

如果它是一个 div 你试图居中，给那个 div 元素 margin: 0 auto。 text-align: center 仅用于文本内容。

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

Answer 2

只需将全局自定义 class 添加到您的 css，说 centerElement 并将其添加到您想要居中的任何元素。

CSS:

.centerElement {
    text-align: center;
}

现在改为：

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

这样做：

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

Answer 3

据我了解，您正在寻找一种使网站居中的方法，因此您需要将 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;
}

<div id="wrap"></div>

<center> 标签已弃用 - 没有完美的替换

<center> tag deprecated - No perfect replace

html

css

center