欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-09 22:58:03
...
原文: 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。

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

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

相关文章

相关视频