一种用CSS以左对齐/中心对齐/右对齐方式显示用HTML编写的句子的方法

在用“从左到右书写的语言”(如日语和英语)中编写的HTML中，除非指定了字符移位方向，否则句子左对齐显示。但是，当您想要将标题和标题(居中)居中并发布它们时，这种情况很常见，有时您希望发布日期和注释右对齐。

标题居中的示例，日期右对齐，文本以左对齐方式发布

指定发布在网页上的句子和图像的文本方向，将它们显示为左对齐，右对齐或右对齐的方法很简单。它只是使用CSS的text-align属性来指定你想要的方向。但是，您可能希望在同一行中同时写“左对齐句子”和“右对齐句子”，而不是简单地在左右对齐的一行上显示句子。例如，它如下所示。

显示左对齐字符和右对齐字符在同一行中共存的示例

因此，这一次，我们将CSS应用于用HTML编写的句子，并显示如何以三种方式显示特定范围，左对齐，居中对齐和右对齐，以及将它们混合在同一行中的方法。我会介绍一下。无论如何，它可以通过一个非常简短的HTML + CSS源来实现。【本文内容】

基本：写入以使用CSS显示左/中/右对齐的整行应用示例：显示左对齐和右对齐共存于同一行的示例应用示例：如何编写CSS以使左对齐和右对齐在同一行上共存应用示例：当text-align和float一起使用时，左对齐和右对齐的原因可以共存混合三种类型：左对齐，居中对齐和右对齐在同一行上混合的显示示例3种类型的混合：如何编写CSS以在同一行中左，中，右混合混合三种类型：如果使用表格单元格，为什么可以混合左，中，右

写入以使用CSS显示左/中/右对齐的整行

要指定字符移位方向，例如用HTML编写的句子，请使用CSS的text-align属性。写作是很简单的，通过指定左对齐居中，值“中心”，如果你指定的“左”如下值：(居中)，将您指定的“正确”的值是右对齐。

上面的CSS源是为了应用于以下HTML源而编写的样式。

这是标题(居中)！ p>

2017年11月27日(右侧) p>

这是文本区域。...... p>

如果您在浏览器中显示这些HTML + CSS，它看起来如下图所示。标题居中，日期右对齐，正文显示左对齐。

标题居中的示例，日期右对齐，正文左对齐

通过这种方式，您可以仅使用CSS text-align属性使文本左对齐，居中或右对齐。这很简单。■ 只有text-align属性不能混合使用不同的字符移位方向此text-align属性指定逐个字符的字符移位方向。例如，如果p元素是右对齐的，则p元素中包含的所有句子都会一次右对齐显示。如果要在同一行中混合不同方向的句子，则需要添加更多CSS。我稍后会告诉你如何做到这一点。

显示左对齐和右对齐共存于同一行的示例

text-align属性只能指定整行的字符移位方向。您无法在同一行中同时显示左对齐部分和右对齐部分。但是，有许多场景需要在同一行中共存“左对齐句子”和“右对齐句子”。例如，您想要创建如下所示的布局。

◆HTML和CSS简介

11月27日星期一

这种外壳是常用的设计。虽然这对文本的顶部出现的红色标题栏将出现在同一行，题为“◆HTML和CSS入门”部分显示在左对齐，日期“11月27日(星期一)”部分显示右对齐我会的。如果您可以像这样在同一行中同时显示左对齐部分和右对齐部分，则可以节省空间并扩大设计范围。

在上面的机箱内，标题部分左对齐，日期部分右对齐，两者似乎都显示在同一行上。实际上，HTML源代码分为两行，但我们使用CSS将其分成一行。

编写CSS以使左对齐部分和右对齐部分共存于同一行

为了将左对齐和右对齐两条线组合成一条线，您可以使用CSS创建布局，以便并排发布多条线(块)。例如，请考虑以下HTML源代码。这是一个简单的HTML，只包含两个带有一个div元素的p元素。