译文：CSS 让对齐文本更智能_html/css_WEB-ITnose

原文：

Aligning Text Smartly in CSS

你有没有想过在 CSS 中更智能地对齐文本？你可以试试，然而 CSS 中 text-align 属性的值并不能设为 smart 或 smartly。

让我们看一个例子

（译者注：左边为提示文本较少时，可以在一行上。右边为提示文本超过两行的情况。）

图上的例子里，当文本在多行的情况下我们使用 text-align: left 来实现。

这很简单。

然后我们要实现文本只有一行的情况下让文本居中。

我们可以不使用 JavaScript 而是纯 CSS 就能实现：

 figure  {   width :  420px ;   border :  1px  solid  orange ;   padding :  10px ;   text - align :  center ;  /* Set text align to center */   float :  left ;   margin :  10px ;  }  figcaption  {   display :  inline - block ;  /* Set this element to inline-block */   text - align :  left ;  /* Set text align to left */  }  

Codepen 演示地址

这是怎么实现的呢？

不只是这里的 figure 和 figcaption 能实现，在

中任何其嵌套的元素比如

也能有效。

当我们把父容器设置为 text-align: center ，父容器中所有 inline 元素水平地居中对齐。

因此，所有的子 inline 元素也将遵守 inline-blocks 中的规则。在上面的例子中，我们设置了 figcaption 为内联块，这使得它居中对齐。

我们知道， inline-block 元素会根据其内容会变宽，最大到其父元素的100％（考虑到填充和没有设置宽度）。当 figcaption 中的内容文字较少时，它会根据父元素 figure 定义居中对齐为 text-align:center 。 点击这里 查看更多关于 inline-block 元素的特性。

当 figcaption 中的文字多于一行时，它会拓宽到其父元素 figure 的最大宽度。现在， figcaption 中定义的 text-align: left 使文本内容左对齐。

在现实中， figcaption 始终居中对齐，但不是很明显，因为它已经达到了其父元素的最大宽度。

希望你喜欢这篇文章，顺便请关注我的 Twitter @sharmavijay。