Heim >Web-Frontend >HTML-Tutorial >译文: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。