HTML 之间的差异标签和 CSS “text-align: center;”属性

在 HTML 中，有多种方法可以使文本和其他元素居中对齐。这包括使用 <center> 标签和 CSS 属性 text-align: center;。

<center> 标签

<center> 标签用于将文本和其他元素水平居中对齐。使用该标签可以将其内部的所有内容水平居中对齐，包括图像、表格等等。示例如下：

<center>
  <h1>Welcome to My Website</h1>
  <img src="example.jpg">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</center>

Welcome to My Website

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

然而需要注意的是，<center> 标签已被 HTML5 废弃，不再推荐使用。所以通常应该使用 CSS 属性来实现元素居中对齐。

text-align: center; 属性

text-align 属性可以用于在 CSS 中将元素文本内容水平居中对齐。该属性可以应用于任何块级元素。示例如下：

<div style="text-align:center">
  <h1>Welcome to My Website</h1>
  <img src="example.jpg">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Welcome to My Website

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

需要注意的是，此方法只会居中文本内容，而不会居中其他类型的元素。如果需要居中其他类型的元素，可以使用以下 CSS 属性：

• display: flex; justify-content: center;：用于在容器内部水平居中子元素。
• margin: 0 auto;：用于使块级元素在其父元素中水平居中。

总结

使用 HTML 中的 <center> 标签和 CSS 的 text-align: center; 属性都可以将元素文本内容水平居中对齐，但 <center> 标签已被 HTML5 废弃，不再推荐使用。应该使用 CSS 属性来实现元素居中对齐。