替代<center>

Question

其他人之前已经问过这个问题，但我从未见过足够的答案。

<center>

标签是否有有效的替代品？

我知道有

margin: 0 auto;

，但这需要设置宽度。还有

align="center"

，但我相信这也是无效代码。

有像

<center>

一样简单有效的东西吗？尽管它已被弃用，但在极少数情况下我仍然会使用它。就在今天，我最终使用了

<center>

将需要在网页上居中的一个按钮居中。是的，我可以设置宽度并给它

margin: 0 auto

，但是将一个元素居中需要大量工作，而且它会弄脏我的代码，我为保持有序而感到自豪。我真的不明白为什么

<center>

首先被弃用，如果没有什么可以替代它的话。

谢谢！

Answer 1

text-align: center

是您应该使用的。其实最理想的方式是这样的：

.center {
    text-align: center;
}
.center > div, .center > table /* insert any other block-level elements here */ {
    margin-left: auto;
    margin-right: auto;
}

显然，事情并不像您希望的那么简单。

就我个人而言，我只是使用：

.center {text-align: center;}
.tmid {margin: 0px auto;}

然后在需要的地方申请课程。

Answer 2

没有 center-tag 将元素居中并不是那么容易。

为此，您需要采取一种即使在 IE6 中也能工作的解决方法：

您需要一个 div 包装器来围绕要居中的元素并使用

text-align:center; width:100%

。 在这个 div 中放置另一个 div 并将

margin

设置为 auto 并设置

text-align:left;

<div style="text-align:center; width:100%">
    <div style="margin:auto; text-align:left;">
        This Container is centered
    </div>
</div>

如果您只想将文本居中，可以使用

<p style="text-align:center;"></p>

这是核心。为了简化事情，你可以使用一个类（就像 Kolink 写的）：

CSS：

.center {
    text-align:center;
    width:100%;
}
.center:first-child { //doesn't work in IE 6
    margin:auto;
    text-align:left;
}

HTML：

<div class="center">
    <div>
        This Container is centered
    </div>
</div>

Answer 3

为了使元素居中，我使用这个：

.middlr {
   display: block;
   margin: auto;
}

适用于每个/任何元素。适合我。

Answer 4

<center>

被弃用的原因是它不是语义标签，而是表示性的，我们应该避免在 HTML 中使用任何本质上不语义的内容。

这与其他表示元素（如

<b>

、

<i>

等）已被弃用的原因相同，因为在 CSS 中有多种方法可以实现相同的目的。

Answer 5

更换中心标签：（你应该两者都做）

将此样式用于父元素：

文本对齐：居中；

对当前元素使用此样式：

左边距：自动； 右边距：自动；

Answer 6

.centered {
  margin-left: auto !important;
  margin-right: auto !important;
}
* > .centered {
  text-align: center !important;
  display: block;
}

Answer 7

这是 PHP-STORM 优惠： 用这个：

<div style="text-align: center;"></div>

Answer 8

text-align: center

是等效的 CSS

Answer 9

我在博客上找到了这个答案

<img src="bullswithhorns.jpg" alt="Michael with the bull" style="width:150px;height:200px;margin:0px auto;display:block">

来源