原文： CSS Text Align – Centered, Justified, Right Aligned Text Style Example

我们使用 CSS text-align 属性来对齐块级元素内的内容。

块级元素的示例是段落（<p>...</p>）、 divs（<div>...</div>）、sections（<section>...</section>）、articles（<article>...</article>）等等。

这种对齐方式仅影响水平轴。所以 text-align 属性不同于我们用来设置元素垂直对齐的 vertical-align 属性。

目录

  • 基本语法
  • text-align 属性的值
  • left 值
  • center 值
  • right 值
  • justify 值
  • inherit 值
  • 小结

基本语法

下面是 text-align 属性的基本语法：

block-level-element {
      text-align: value;
    }

现在我们将看看它可以用来帮助你在页面上定位内容的不同值。

text-align 属性的值

text-align 属性接受 left、center、right、justify 和 inherit 作为值。

我们将一一查看这些值。

在我深入研究这些值以及它们在浏览器中如何显示之前，请看一下下面的 CSS。我设置了这些样式以提高可见性，因此你可以更好地看到它们的作用：

   body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

    div {
      background-color: #adadad;
      width: 40rem;
      height: 4rem;
      padding: 3rem 0.5rem;
    }

left 值

text-align 属性的 left 值是默认值。因此，默认情况下，块级元素内的每个内容都左对齐。

 div {
      text-align: left;
    }
ss-1-3

如果你希望块级元素内的内容左对齐，则无需为其分配 left 文本对齐值。如果这样做，你只是在复制已经是默认设置的内容。

center 值

使用 center 值，在左侧和右侧创建空间，因此，所有内容都被推到中心。

如果你想将块级元素内的内容与中心对齐，那么 center 值是你最好的选择。

  div {
      text-align: center;
    }
ss-2-3

right 值

为 text-align 属性赋值 right 会将块级元素内的内容推到右侧。

  div {
      text-align: right;
    }
ss-3-4

justify 值

text-align 属性的 justify 值将块级元素（框）左右边缘的内容对齐。如果最后一行不是一个完整的行，那么这个属性就不管它。在下图中更容易看出这是如何工作的：

 div {
      text-align: justify;
    }
ss-4-4

inherit 值

text-align 属性的 inherit 值的行为顾名思义。其 text-align 值设置为 inherit 的元素会继承其直接父级的 text-align 值。

 div {
      text-align: inherit;
    }
ss-5-5

在这个示例中，我们的 div 继承了 body 的 text-align 值——默认情况下是 left。

如果 body 的 text-align 值设置为 right，而 div 的 text-align 值设置为 inherit，则 div 内的文本向右对齐。

 body {
      text-align: right;
    }

    div {
      text-align: inherit;
    }
ss-6-1

小结

在本文中，你了解了 CSS text-align 属性及其值。

我们在此处查看的示例以了解值的行为方式仅包含文本——因此你可能想知道这些值是否也适用于图像。嗯，是的，它们适用于图像。

下面是一个 div 内的图像，其中 text-align 设置为 center：

 <div>
      <img
        src="coming-soon.jpg"
        alt="coming_soon"
        width="74px"
        height="54px"
      />
</div>

 div {
      text-align: center;
    }
ss-7-2

谢谢你阅读本文！