什么时候使用中心和自动边距？ CSS

Question

我正在 Codecademy 学习 CSS。我已经参加了他们的 HTML 课程，所以我知道 center 标签。但是，现在他们引入了 CSS 保证金属性。他们还介绍了margin: 0 auto;属性。据我所知，两者做的是完全一样的事情。那么有什么区别吗？我什么时候使用每一个或者这无关紧要？提前致谢！

Answer 1

正如 W3Schools wiki 所描述的那样 here，<center></center> 标签不受 HTML5 支持，尽管由于向后兼容性，浏览器仍然可以使用它。最好的选择是使用 margin: 0 auto 属性.

Answer 2

<center> 是贬值标签。你应该避免使用它。 HTML5 不支持此标签。 CSS 属性用于设置元素的对齐方式，而不是HTML5中的center标签。 <center> 的等效标签可以被认为是 -

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

<center> 贬值的主要原因是它定义了内容的呈现方式，而不是内容本身。根据w3.org-

The CENTER element is exactly equivalent to specifying the DIV element with the align attribute set to "center". The CENTER element is deprecated.

So is there any differences and when do I use each one or does it not matter?

上面的代码片段和<center>可以认为是等价的。仅使用 margin: 0 auto; 并不总是被认为是相同的。看下面的例子-

<!DOCTYPE html>
<html>

<body>

  <center>
    <div>This is a div inside center</div>
  </center>
  <br>

  <div>This is a div without any styling.</div>
  <br>

  <div style="margin: 0 auto;">This is a div with "margin: auto 0px;".Text not centered, doesn't work.</div>
  <br>

  <div style="margin: 0 auto;text-align:center">This is a div with "margin: auto 0px;".Text centered, works !</div>


</body>

</html>

还有一点要考虑的是，<center>标签是一个块级元素，这意味着它可以包含其他块级和内联元素，并将它们居中.考虑下面的例子 -

p {
  width: 200px;
  display: block;
}

<!DOCTYPE html>
<html>

<body>
  <!--p has a width of 200px given through css-->
  <center>
    <p>centers the element to page center</p>
  </center>
  <center>


  <div style="margin:0 auto;text-align:center;">
    <p>This one doesn't work here same as center tag </p>
  </div>

  <div>
    <p style="margin:0 auto;text-align:center;">This one does</p>
  </div>

</body>

</html>

什么时候使用中心和自动边距？ CSS

When do I Use Center and Auto Margin? CSS

html

css

center

margin