在网页设计中，细节很重要。图标，颜色,你选择的字体所有这些都会影响内容的可读性。如何对齐页面上的文本也是如此。

事实上，设计中有一个对准原理，可以创建有组织和逻辑设计。被称为边缘和中心对齐，这些原理状态应该是相对于“无形线”或余量组织的元素。根据打印，这不是一个字面上的行——它只是通过页面的排列方式暗示出来的。

下面是一个名片的例子，它遵循这两个原则，包括左对齐、右对齐和居中对齐的文本。

图像源码

为实现在您的网站上类似平衡的外观，您需要知道如何在这三种方式中对齐文本。虽然大多数网站构建平台将在其工具栏中提供按钮以简化此过程，但您可能会从头开始或在没有这些按钮的工具中构建网站，应用程序或图形。在这些情况下，您需要知道如何使用代码对齐文本。

在这篇文章中，我们将讲解如何左对齐，右对齐和居中对齐文本超文本标记语言。让我们开始吧。

如何在HTML中对齐文本

在我们潜入之前，让我们确保我们在同一页面上有关“HTML”的原因。

过去，您可以简单地使用HTML align属性更改文本的对齐方式。例如，如果你想让这个网页的标题居中，那么你需要写以下一行HTML:

如何向右，左，＆center在html 中对齐文本

但是这个属性已经被弃用了，取而代之的是一种更有效的改变文本表示方式的方法:CSS text-align属性。这个属性是HTML align属性的一个轻量级和灵活的替代——而且它并不难学。

您可以在内联CSS、内部CSS或外部CSS中定义此属性。内联CSS意味着HTML和CSS将放在HTML文档的主体部分。所以，从技术上讲，你将在HTML中对齐文本。然而，重要的是要理解另外两种样式的CSS比内联CSS更可取。这就是为什么我们还将使用CSS重写这些示例，这些CSS可以放在HTML文档的标题部分或外部样式表中。让我们开始吧。

HTML对齐文本左

根据左边距对齐文本是最常见的对齐方式，因为它模仿了大多数人的阅读方式:从左到右。(请注意，以特定语言设置的网页，包括阿拉伯语、希伯来语、波斯语和乌尔都语，将有不同的默认方向。)

左对齐对于将Long段落定位在页面上特别有效，因为它创建了一个直边，其​​中读者将开始每个新的文本。另一方面，右侧和中心对齐，创建一个粗糙的边缘，该边缘需要读者在略微不同的点处启动每个新的文本行。这使得阅读过程较慢，更令人沮丧。尝试阅读以下段落以查看哪个对齐使段落最容易阅读。

图像源码

对于下面的示例，我将使用w3schools tryit编辑器，默认使用左对齐。在本例中，不需要添加text-align属性并将其设置为“left”。但是，如果您正在使用另一个工具，它有另一个默认对齐或没有默认对齐，我将包含这个示例。

以下是您用内联CSS写它的方式：

如何在HTML中左对齐
解释
由于我正在使用w3schools tryit编辑器，默认对齐留下，因此不需要此样式标记。但是，如果您使用具有不同或没有默认对齐的另一个代码编辑器，那么这就是您如何在内联CSS中使用Text-align属性。

这是结果：

图像源码

请注意，上面的内联CSS只会影响H2下方该段落的对齐。如果要更改页面上所有段落的对齐，则可以使用内部或外部CSS。这是CSS：

p {
文本对齐：左对齐；
}

这是HTML：

如何在HTML中左对齐
这是虚拟文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。 This is more dummy text. This is more dummy text.
解释
由于我正在使用W3Schools Tryit Editor，因此剩下默认对齐，从而在CSS中定义文本对齐属性是不必要的。但是，如果您使用具有不同或没有默认对齐的另一个代码编辑器，那么这就是您将如何在内部或外部CSS中使用Text-Anigat属性。

这是结果：

图像源码

HTML对齐文本

将文本与右边距对齐是最不常见的对齐类型，因为它与大多数人阅读文本的方式背道而驰。尽管阅读需要更多的努力，但右对齐的文本——如果策略性地使用——可以帮助为杂志封面、简历、诗歌、海报、名片或其他简短内容创造一种非传统的外观。

这是一个突击效果正确的对齐文本可以具有：

图像源码

假设我想右对齐页面的标题，但保持其他所有内容左对齐。然后我可以使用下面的HTML内联CSS:

如何在HTML中右对齐文字
这是虚拟文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。 This is more dummy text. This is more dummy text.
解释
因为我使用的是W3Schools Tryit编辑器，默认对齐是左对齐。因此，如果您想更改单个元素的对齐方式(如标题)，那么您可以使用一个样式属性，该属性包含将CSS text-align属性设置为“right”。页面上的所有其他内容都将保持对左边距刷新

这是结果：

图像源码

现在让我们说我想要对齐页面上的所有标题。然后我可以使用一个CSS选择器针对所有标题并将其放在页面的头部部分内。

这是CSS：

H2 {
text-align:正确;
}

这是HTML：

如何在HTML中右对齐文本
这是虚拟文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。 This is more dummy text. This is more dummy text.
< h2 > < / h2的解释>
因为我使用的是W3Schools Tryit编辑器，默认对齐是左对齐。因此，如果您想更改单个元素的对齐方式(如标题)，那么您可以使用一个样式属性，该属性包含将CSS text-align属性设置为“right”。页面上的所有其他内容都将保持对左边距刷新

这是结果：

图像源码

HTML对齐文本中心

沿着中心轴对文本进行对齐是一种常见且经常被过度使用的对齐方式。虽然它让页面看起来有组织和对称，但把页面上的所有东西放在中心可能会很无聊。

此外，居中大型文本段落使阅读体验更加困难。因此，应为标题，块引号，呼叫动作按钮和其他元素保存的居对准，这些元素应扰乱文档流动以获取读者的注意。

下面是一个很有创意的例子，在你的主页上最重要的元素上使用居中对齐:

图像源码

假设我正在建立一个网页引导框架我想屈服于调整引导按钮文本，但其他内容保持左对齐。由于button元素是一个内联元素，而text align属性仅适用于块级元素（如标题和段落），因此该过程将略有不同。

首先，我需要将按钮包装在div容器中。然后我可以将内联CSS应用到div上，如下所示:

如何将html 中的文本对齐
这是虚拟文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。 This is more dummy text. This is more dummy text.
解释
因为我使用的是W3Schools Tryit编辑器，默认对齐是左对齐。因此，如果您想更改单个元素的对齐方式(如标题)，那么您可以使用一个样式属性，该属性包含将CSS text-align属性设置为“right”。页面上的所有其他内容都将保持对左边距刷新
单击我

这是结果：

图像源码

现在，假设我在页面上有多个引导按钮，并希望将所有按钮居中对齐。然后，我可以使用以下CSS并将其添加到网页的标题部分：

.button {
文字对齐：中心;
}

这是HTML：

如何将html 中的文本对齐
这是虚拟文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。这是更假的文本。 This is more dummy text. This is more dummy text.
单击我
解释
因为我使用的是W3Tryit编辑器，所以默认对齐方式为左对齐。因此，如果您想更改单个元素（如按钮）的对齐方式，则可以使用一个样式属性，该属性包含设置为“中心”的CSS文本对齐属性。页面上的所有其他内容都将保持与左边距对齐
单击我

这是结果：

图像源码

使用HTML和CSS对齐您的文本

如果你有基本网络设计知识，您可以更改文本的对齐方式。这可以帮助您构建和自定义页面布局并使您的内容更具可读性。如果您使用Bootstrap框架构建，请查看您可以的其他方式覆盖Bootstrap CSS中的默认样式创建一个真正独特的网站。