原文:
Aligning Text Smartly in CSS

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

让我们看一个例子

对齐文本

(译者注:左边为提示文本较少时,可以在一行上。右边为提示文本超过两行的情况。)

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

这很简单。

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

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

Codepen 演示地址

这是怎么实现的呢?

不只是这里的figurefigcaption能实现,在<div>中任何其嵌套的元素比如<p>也能有效。

当我们把父容器设置为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。

Tagged:

发表评论

电子邮件地址不会被公开。 必填项已用*标注