如何在HTML中居中文本|极客教程

如何在HTML中居中文本

在HTML中，我们经常需要将文本居中显示，无论是在段落中，还是在标题中。本文将详细介绍如何在HTML中居中文本的几种方法。

使用text-align属性

在HTML中，我们可以使用CSS的text-align属性来实现文本居中显示。text-align可以应用于任何块级元素，例如div、p、h1等。

示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
}
</style>
</head>
<body>

<div class="center">
  <p>在how2html.com学习HTML</p>
</div>

</body>
</html>

Output:

如何在HTML中居中文本

使用居中标签

除了使用CSS的text-align属性，我们还可以使用HTML中的居中标签来实现文本居中显示。居中标签有<center>和<p align="center">两种。

示例代码：

<!DOCTYPE html>
<html>
<body>

<center>how2html.com</center>

<p align="center">how2html.com</p>

</body>
</html>

Output:

如何在HTML中居中文本

使用flex布局

在现代web开发中，flex布局被广泛应用于页面布局。我们可以使用flex布局将文本水平和垂直居中显示。

示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}
</style>
</head>
<body>

<div class="container">
  <p>how2html.com</p>
</div>

</body>
</html>

Output:

如何在HTML中居中文本

使用table布局

除了flex布局，我们还可以使用table布局来实现文本居中显示。将文本放在一个单元格中，并将其水平和垂直居中。

示例代码：

<!DOCTYPE html>
<html>
<body>

<table style="width:100%; height:100%;">
  <tr>
    <td style="text-align:center; vertical-align:middle;">how2html.com</td>
  </tr>
</table>

</body>
</html>

Output:

如何在HTML中居中文本

使用absolute和transform属性

在某些情况下，我们可能需要将文本相对于父元素居中显示。这时可以使用absolute和transform属性来实现。

示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<div class="parent">
  <p class="child">how2html.com</p>
</div>

</body>
</html>