`
tracyjuan
  • 浏览: 11366 次
  • 性别: Icon_minigender_2
  • 来自: 郑州
社区版块
存档分类
最新评论

line-height的使用

阅读更多
行高指的是两条基线之间的距离,即内容区域和两个半行间距的累加
1.图片水平垂直居中
  .box {line-height:300px;text-align:center;}
  .box > img {vertical-align:middle;}
  但是该效果受box类里面的文字大小影响,文字的size越大,图片为了和文字的基线对齐,图片越是下沉,如果想达到较好的图片居中效果,box的font-size:0px;才能实现真正的垂直居中
2.多行文本水平垂直居中
  .box {line-height:250px;text-align:center;}
  .box > .text {display:inline-block;line-height:normal;text-align:left;vertical-align:middle;max-width:100%;}
3.ie6/ie7上面设置行高代替高度,可以避免haslayout现象
4.清除图片下方的间隙
  a.图片块状化-无基线对齐
     img {display:block;}
  b.图片底线对齐
     img {vertical-align:bottom;}
  c.行高足够小,图片基线位置上移
     .box {line-height:0;}
  d.如果盒子里面没有文字
     .box {font-size:0px;}
5.小图片大文字
   用vertical-align属性控制图片的位置
分享到:
评论

相关推荐

    line-height全面解析

    4. **Length Value**:也可以使用具体的长度单位(如像素px、em等)来指定`line-height`。 ```css p { line-height: 20px; } ``` 5. **Number Value**:可以使用一个无单位的数值来指定`line-height`。这种...

    tinyMCE富文本编辑器line-height行高插件

    1. **下载与解压**:首先,你需要从提供的压缩包`tinymce-line-height-plugin-master`中提取文件。这个压缩包通常包含一个`plugin`目录,里面包含了插件的所有必要文件,如JavaScript、CSS和语言文件。 2. **放置...

    tinyMCE 富文本编辑器 line-height 行高插件

    tinyMCE 富文本编辑器 line-height 行高插件。 tinyMCE富文本编辑器line-height行高插件,下载后放在tinyMCE插件的plugins文件夹中,之后初始化中引入plugins,即可在toolbar中展示 tinyMCE line-height 行高插件

    css属性行高line-height的用法详解

    在实际使用中,line-height属性可以通过font属性进行缩写,font属性中的line-height值紧跟着font-size值使用斜杠分开,这样的写法可以简化代码。例如,body{font:100%/1.2arial;}这个样式声明中,100%是字体大小,...

    关于css中line-height(行高)设置无效的问题的解决方法

    在CSS(层叠样式表)中,`line-height` 是一个非常重要的属性,它用于设置元素内文本行之间的垂直间距。然而,在某些情况下,我们可能会遇到`line-height`设置无效的问题,这通常与CSS的解析顺序和优先级有关。本文...

    深入理解CSS行高line-height与文本垂直居中的原理

    在CSS布局中,`line-height`属性扮演着至关重要的角色,尤其在实现文本垂直居中时。`line-height`定义了元素内部行之间的空间,它不仅影响文本的可读性,还能用来创建各种布局效果。以下是对`line-height`属性及其在...

    ckeditor5-line-height-plugin:CKEditor5的创建插件,用于更改所选块的行高

    ckeditor5-line-height-plugin CKEditor5的创建插件,用于更改所选块的行高。 开始使用 首先,从npm安装构建: npm install --save ckeditor5-line-height-plugin 或使用纱线: yarn add ckeditor5-line-height-...

    text-align,vertical-align,line-height居中布局笔记

    - 使用`line-height`进行垂直居中时,需要确保元素的高度固定且已知。 - `vertical-align: middle`只有在行内元素或`inline-block`元素中才有效。 - 当需要对`inline-block`元素进行垂直居中时,除了设置`vertical-...

    css中height和line-height区别

    line-height:行高 设置文字间上下距离 height:高度 就是定义一个层 或某样东西的高度啦 也就是说line-height是特指单行高度,height可以为所有元素的高度 文字放大后边缘会重叠? line-height直白理解就是文字...

    line-height使文本居中的3像素bug问题

    在网页制作中,文本居中是一个常见的需求,而line-height属性正是用来调整行内元素中文本垂直对齐的关键。然而,有时候我们可能会遇到一个看似"bug"的现象,即使用line-height进行居中时,文本与容器之间会有3像素的...

    解决line-height=height元素高度但是文字并没有垂直居中的问题

    标题提到的问题——"line-height=height元素高度但是文字并没有垂直居中",实际上涉及到的是文本排版中的基线对齐原理。 首先,我们要理解什么是基线。在排版中,基线是文本字符底部所在的线,它不是一个实际可见的...

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

    - 在处理图片与文本的垂直居中对齐时,可能需要额外的布局技巧,如使用双层包裹元素,分别设置图片和文本的`line-height`或`vertical-align`。 总之,`line-height`是一个强大的CSS属性,它可以用于改善文本的视觉...

    移动端android上line-height不居中的问题的解决

    现在越来越多的移动界面使用rem适配,遇到的坑也不尽其数,今天就移动端android上line-height不居中的问题提出自己的解决办法。 据分析得知原因: 1.字体大小不要使用奇数字号,带小数点的更不要提了。也就是说...

    overflow:hidden line-height clearfix:after使用方法介绍

    2.line-height指的是在DIV中的元素上下居中 比如用在里,则可以将line-height的高度和height的值相等,(height:30px; line-height:30px;)这样可以让文字在内相对于30px垂直居中。比如用在内,像这样成段落的,如果...

    tinyMCE 富文本编辑器 line-height 行间距调整.zip

    tinyMCE 富文本编辑器 line-height 行高插件。 tinyMCE富文本编辑器line-height行高插件,下载后放在tinyMCE插件的plugins文件夹中,之后初始化中引入plugins,即可在toolbar中展示 tinyMCE line-height 行高插件

    font和line-height之CSS代码书写顺序不同,导致显示效果不一样

    在CSS(层叠样式表)中,`font`和`line-height`是两个重要的属性,它们分别用于设置文本的字体和行间距。然而,当同时使用这两个属性时,它们的书写顺序可能会影响到最终的显示效果。这个现象尤其在处理一些特定...

Global site tag (gtag.js) - Google Analytics