究竟什么时候使用line-height合适------line-height的实际应用

简介: 1) 单行文字的垂直居中对齐把line-height值设置为height一样大小的值可以实现单行文字的垂直居中。这句话确实是正确的,但其实也是有问题的。问题在于height,把line-height设置为您需要的box的大小可以实现单行文字的垂直居中,height是多余的。

1) 单行文字的垂直居中对齐

把line-height值设置为height一样大小的值可以实现单行文字的垂直居中。这句话确实是正确的,但其实也是有问题的。问题在于height,把line-height设置为您需要的box的大小可以实现单行文字的垂直居中,height是多余的。

代替height,避免ie6/ie7中的haslayout

2019062107033325.png

2) 多行文字的垂直居中

要实现高度不固定的文字垂直居中使用padding就好了。对于高度固定的div,里面文字单行或多行显示,字体大小有大有小的情况怎么办呢?方法之一就是借助于line-height。

2019062107013427.png

3)图片的垂直居中

消除图片底部间隙(如果不是居中。)

1.图片块状化-无基线对齐

img {display:block;}

2.图片底线对齐

img{vertical-align:bottom;}

3.行高足够小-基线位置上移

.box{line-height:0;}

2019062106594896.png

目录
相关文章
|
4月前
|
前端开发
line-height与height的区别
line-height与height的区别
45 0
|
Python
nothing to repeat at position 0(解决方案)
nothing to repeat at position 0(解决方案)
286 0
nothing to repeat at position 0(解决方案)
html+css实战94-内容width和height
html+css实战94-内容width和height
97 0
html+css实战94-内容width和height
|
前端开发
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
476 0
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
$ gradle packageDebug --stacktrace error: top-left corner pixel must be either opaque white or transparent.
$ gradle packageDebug --stacktrace error: top-left corner pixel must be either opaque white or transparent.
2547 0