原文：
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。
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
793
收藏
