如何使用 CSS 居中对齐网页中的文本

如果您不熟悉前端开发,那么浏览器中纯 HTML 文档生成的内容与现代网站的实际外观之间的差异似乎非常令人生畏。

您可能会注意到的第一件事是,默认情况下所有 HTML 文本都与网页左侧对齐。虽然没有实用的方法可以让 HTML 中的文本居中对齐,但有一个 CSS 属性可以轻松实现这一点。

在本教程文章中,您将学习如何使用 CSS 使网页上的文本居中对齐。

什么是 CSS 文本对齐属性?

CSS text-align 属性是用于在网页上排列文本的 CSS 功能。根据您希望在网页上实现的布局,可以为该属性指定多个值之一。 CSS text-align 属性经常被赋予以下值。

相关:使用 CSS 文本对齐属性对齐

  • Left(将文本与网页左侧对齐,也是默认对齐方式)
  • 右(将文本与网页右侧对齐)
  • 居中(将文本与网页的中心对齐)
  • 对齐(确保每行文本具有相同的宽度)

居中对齐网页上的文本

鉴于大多数语言是从左到右阅读的,默认情况下将文本对齐到网页的左侧是可行的。但是,在某些情况下,居中对齐文本是一种更实用的方法(例如标题和副标题)。

简单的 HTML 网页示例


<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Alignment</title>
</head>

<body>
<div class="container">
<div id="box-1">
<h1>Heading</h1>
<h3>Lorem ipsum, dolor sit amet consectetur adipisicing </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,
repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt
commodi ad fugit soluta provident dolorem distinctio?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,
repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt
commodi ad fugit soluta provident dolorem distinctio?</p>
</div>
<div id="box-2">
<h1>Heading</h1>
<h3>Lorem ipsum, dolor sit amet consectetur adipisicing </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,
repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt
commodi ad fugit soluta provident dolorem distinctio?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,
repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt
commodi ad fugit soluta provident dolorem distinctio?</p>
</div>
</div>
</body>
</html>

上面的 HTML 文件将在您的浏览器中生成以下网页。

从上面的输出中可以看出,所有文本都向左对齐。您可以使用多种方法将上面的文本居中对齐,但首先,您需要确定要居中对齐的文本。

如果目标是将网页上的所有文本居中对齐,则以下代码将完成此操作。

居中对齐所有文本示例


.container{
text-align: center;
}

上面的 CSS 代码使用 class 属性来定位网页上的所有文本,这是唯一可能的,因为有一个父 <div> 标签,其中包含一个包含网页上所有文本的容器类。该代码将在您的浏览器中生成以下输出。

如您所见,网页上的所有文本现在都居中对齐。唯一的问题是,如果段落向左对齐,它会看起来更好,可读性更好。如果您只想居中对齐网页上的某些文本,您可以使用 HTML 元素作为选择器而不是类和 id。

相关:如何使用 CSS 选择器定位网页的一部分

居中对齐特定文本示例


h1, h3{
text-align: center;
}

上面的代码仅针对网页上的 h1 和 h3 元素,并将在您的浏览器中生成以下输出。

在网页上居中对齐 Div

您可能会注意到现代网站中的另一个趋势是文本不会一直到边缘。这是使用父 div 的实例之一。尽管 CSS 中没有 div align 属性,但 margin 属性可用于居中对齐父 div 及其内容。

居中对齐 Div 示例


.container{
max-width: 920px;
margin: auto;
}

上面的代码做了几件事。首先,它使用父 div 的类为网页上的所有内容分配一个宽度。在将网站内容放入容器时,您应该始终使用 max-width 属性而不是 width 属性,因为这通过定义最大宽度而不是固定宽度来促进响应。

上面的代码还利用 margin 属性将父 div 放置在网页的中心,在浏览器中产生以下输出。

从上图可以看出,文本的宽度已减小到 920px,由于 margin 属性,包含文本的不可见容器现在位于网页的中心。

保证金属性如何运作?

可以为边距属性分配三个不同值的组合。当四个值分配给 CSS 属性时,每个值都将针对 HTML 元素的四个边之一。

当两个值分配给 margin 属性时,第一个值将定位 HTML 元素的顶部和底部,第二个值将定位 HTML 元素的左侧和右侧。

在上面的例子中,margin 属性只分配了一个值,这意味着它针对 HTML 元素的左侧和右侧(在这种情况下是父<div>标签)。

margin 属性通常被分配以像素为单位的值,或者如上例中的auto值。 auto值确保 HTML 元素两侧使用的边距相等。这有效地将父 div 元素(以及扩展的文本)放置在网页的中心,为您提供反映现代网页的布局。

你现在可以做什么

这篇教程文章教你几件事:

  • 如何使用 text-align 属性使网页上的文本居中。
  • 如何居中对齐由<div>标签或其他 HTML 元素包围的不同文本组。
  • 如何使用父 div 上的边距属性将一组文本居中。

然而,这只是冰山一角,因为它与可用于组织网站布局的 CSS 工具有关。 CSS Grid 是最流行的 CSS 属性之一,可用于特别绘制网页的结构布局(包括居中对齐文本)。

CSS Grid 为您的网页提供二维(行和列)布局结构,其框架易于学习和使用。