垂直对齐(vertical-align)
默认: baseline -- 一行内文本的下方。
默认: baseline -- 一行内文本的下方。
middle -- 一行内小写字母的高度的1/2
如果让文本垂直居中,需要把其放置在inline,inline-block.
图片在块级元素中是默认以基线对齐,而基线与块级元素的边界是有一定的距离,并不美观。为了解决这个问题,可以将图片设置成vertical-align,使图片与小写字母二分之一处对齐,不用靠基线对齐,就可以让图片边界和块级元素的边界之间的缝隙消失。当然了,前提是父元素没有指定高度了。
在解决竖起方向上的缝隙后,还需要考虑水平方向上的缝隙。两img元素标签之间的换行符会导致水平方向上的两图片之间产生缝隙。可以把换行符取消,但不美观。所以用注释符号<!-- -->来取代换行符。这样就取消水平方向上的空隙了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body{padding: 0; margin: 0;} div{ background-color: yellowgreen;} img{ width: 220px; /* 问题一: 行内元素与父元素底边有空隙 原因:行内元素 默认是基线(baseline)对齐 解决:设置 vertical-align: middle; */ vertical-align: middle; } span{ background-color: red; border: 1px solid; } </style> </head> <body> <div> <!--问题二:通过注释方式,消除因换行导致的 行内元素间的空隙--> x<img src="img/jd001.jpg" alt=""><!-- --><img src="img/jd001.jpg" alt=""><span>Hello</span> <span>World</span> </div> </body> </html>