【生意多】-免费发布分类信息
当前位置: 首页 » 新闻 » 教程 » 正文

CSS line-height行高上下居中垂直居中样式属性

放大字体  缩小字体 发布日期:2020-09-10 07:36:07    浏览次数:12
导读

  行高line-height的值可以为百分比数字 由浮点数字和单位标识符组成的长度值,允许为负值。其百分比取值是基于字体的高度尺寸。  Line-height行高属性,运用到对文字排版,实现上下排文字间隔距离,以及单排文字在一定高度情况上下垂直居中布局。  一般我们对对象设置设置line-height行高属性即可实现让自动换行文字

  行高line-height的值可以为百分比数字 由浮点数字和单位标识符组成的长度值,允许为负值。其百分比取值是基于字体的高度尺寸。

  Line-height行高属性,运用到对文字排版,实现上下排文字间隔距离,以及单排文字在一定高度情况上下垂直居中布局。

  一般我们对对象设置设置line-height行高属性即可实现让自动换行文字排版均匀间隔多少设置。

  假如我们一个固定30px对象,如果要让其文字内容上下垂直居中,我们即可使用line-height:30px即可。

  我们设置两个div对象盒子,一个是多排文字行高设置;另外一个高度固定一排文字,实现文字中此高度固定内上下垂直居中。两个案例我们都使用css line-height实现。

  大家下来可以根据案例图复制CSS和HTML代码亲自实践作为div+css line-height行高属性。

  通过以上案例大家可以将行高line-height的值修改然后测试观察效果方知晓line-height作用。

  line-height行高上下居中属性样式,使用于多排文字如文章内容实现文字上下排间隔居中属性,以及单排高度固定的上下垂直居中。常常遇见内容与图片混排,我们希望图片和文字内容上下居中在一排,但是文字会居图片下部,通常解决方法是使用两个盒子分别设置行高与高度。

  在一排的文字或内容布局中,如果要让内容上下垂直居中,我们只需要设置line-height与height高度相同高度长度与html单位即可实现垂直居中;如果是多列的或文章内容通常我们会设置每行文字一定平均上下间隔,这个时候我们只需要设置line-height行高即可。

  如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。

 
关键词: css字体垂直居中
(文/小编)
打赏
免责声明
• 
本文为小编原创作品,作者: 小编。欢迎转载,转载请注明原文出处:http://www.31duo.com/news/show-518630.html 。本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们。
 

(c)2016-2019 31DUO.COM All Rights Reserved浙ICP备19001410号-4

浙ICP备19001410号-4