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">）既不起作用也不起作用（<style>#coolcenterdude{text-align:center}</style><div id="coolcenterdude">）。即使使用外部CSS文档执行此操作也不起作用。它就像我试图居中的对象忽略了text-align参数。

有任何帮助吗？

<center>仍然可以正常运行，但当标签最终失去支持时，我不希望自己的网站被搞砸。

Answer 1

如果它是你想要居中的div，给这个div元素提供margin：0 auto。 text-align：center仅用于文本内容。

如果您没有旧的浏览器支持，您可以尝试显示flex，或者可以使用后备并开始使用它。

Answer 2

只需向您的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>标签 - 没有完美的替代品

3 个答案: