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

没有中心标签的中心元素并不容易。

为此你需要做一个甚至在IE6中工作的解决方法：

您需要围绕要居中的元素的div包装并使用text-align:center; width:100%。在此div中，您可以放置另一个div并将margin设置为自动和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

替换中心标记：（您应该同时执行）

将此样式用于父元素：

文本对齐：中心;

将此样式用于当前元素：

margin-left：auto; margin-right：auto;

Answer 6

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

Answer 7

text-align: center是等效的CSS

Answer 8

这是PHP-STORM提供的：用这个：

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

Answer 9

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

＆＃13;

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

＆＃13;

Source

替换<center> </center>

9 个答案: