码迷,mamicode.com
首页 > Web开发 > 详细

css中的垂直对齐(vertical-align)

时间:2018-12-31 13:50:17      阅读:3110      评论:0      收藏:0      [点我收藏+]

标签:aaa   splay   base   overflow   无效   元素   css   垂直   com   

垂直对齐只对inline或inline-block元素有效

 

1.基线(baseline)

使用字母x辅助找基线

inline或inline-block基线:在后加一个字符x,x的底部所在位置就是基线位置

父元素基线:在父元素最后加一个x,x的底部所在位置就是基线位置

空的inline或inline-block元素的基线:元素底部

非空inline或inline-block元素,但是overflow属性不为visible(默认是visible)的基线:元素底部

图片基线:图片底部

 

2.实例:

  • 消除图片底部的空白

  

<div style="background-color: red">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546240915886&di=d2c1f2208334db8646f712bc51305491&imgtype=0&src=http%3A%2F%2Fm.360buyimg.com%2Fn12%2Fg13%2FM04%2F10%2F10%2FrBEhVFLLt0YIAAAAAAKIy0fC9qQAAHsIgNcNAwAAojj467.jpg%2521q70.jpg">
</div>

  默认情况下,vertical-align的对齐方式是基线对齐,也就是内部元素跟父元素的基线对齐,img基线在图片底部,可以在img后加一个x字符确定父元素的基线,发现x底部(父元素的基线)跟父元素的buttom会有一段距离,图片要跟父元素基线对齐,所以也会有一段小空白

  

技术分享图片

 

  x的基线跟父元素底部有一点距离是因为有些字符,比如p会往下写,要预留点距离技术分享图片

    文字的基线类似英语本:

  技术分享图片

    红线的位置就是基线,也就是我们在本子上写字符x,x的底部

 

 

消除方法:

     1.把img的display属性改为block,由于垂直对齐对block元素无效,也就没有空白了

     2.把img对齐方式改为bottom,让其底部与父元素底部对齐

      style="vertical-align: bottom;"

      

 

css中的垂直对齐(vertical-align)

标签:aaa   splay   base   overflow   无效   元素   css   垂直   com   

原文地址:https://www.cnblogs.com/cowboybusy/p/10200295.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!