CSS文本对齐--居中、整齐、右对齐的文本样式示例

迪鲁宾
455 阅读2分钟

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

块级元素的例子有段落(<p>...</p>)、div(<div>...</div>)、章节(<section>...</section>)、文章(<article>...</article>)，等等。

这种对齐方式只影响到水平轴。因此，text-align 属性与vertical-align 属性不同，我们用它来设置元素的垂直对齐。

内容表

基本语法

这里是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

如果你想让一个块级元素内的内容向左对齐，你不需要给它指定一个text-align ，即left 。如果你这样做，你只是重复了已经默认的内容。

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 值

inherit text-align 属性的值正如其名称所暗示的那样。一个元素的text-align值设置为 ，就会继承其直接父级的 值。inherit text-align

 div {
      text-align: inherit;
    }

ss-5-5

在这种情况下，我们的div 继承了body的text-align值--默认是left 。

如果body 的text-align 值被设置为right ，而div 的值被留作继承，那么div 里面的文字就会向右对齐。

 body {
      text-align: right;
    }

    div {
      text-align: inherit;
    }

ss-6-1

总结

在这篇文章中，你了解了CSStext-align 属性和它的值。

我们在这里看到的例子只包含了文本，所以你可能想知道这些值是否也适用于图像。嗯，是的，它们可以。

下面是一个在div中的图片，text-align设置为居中:

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

 div {
      text-align: center;
    }

ss-7-2

谢谢您的阅读。

avatar
文章
阅读
粉丝