全面理解line-height与vertical-align
|
inline-block元素在块级元素中留空隙就是因为图像的默认垂直对齐方式是基线对齐(基线对齐在原理上图像底边与匿名文本大写英文字母X的底边对齐)；而匿名文本是有行高的，所以X的底边距离行框有一段距离，这段距离就是图像留出的空隙 于是，解决这个问题有以下几个解决办法 [1]display:block 因为垂直对齐方式只能作用于替换元素和行内元素，更改为块级元素，会使垂直对齐方式失效 [2]父级的line-height: 0 这样使匿名文本与行框的距离为0 [3]vertical-align: top/middle/bottom 应用 【1】单行文本水平垂直居中
XML/HTML Code复制内容到剪贴板
div{ line-height: 100px; width: 100px; text-align: center; border: 1px solid black; }
<div>测试文字</div> [注意]好多地方都写着单行文本垂直居中是将高度和行高设置成一样的值，但高度其实是没有必要设置的。仅仅设置行高就可以，文字在一行中本身就是垂直居中显示扫 【2】图片近似垂直居中 XML/HTML Code复制内容到剪贴板
div{ line-height: 200px; text-align: center; } img{ vertical-align: middle; } <div> <img src="#" alt="#"> </div> 由于字符X在em框中并不是垂直居中的，且各个字体的字符X的高低位置不一致。所以，当字体大小较大时，这种差异就更明显 [注意]IE7浏览器在写块级元素包含行内元素时一定要写成换行写法，而不要写在一行 复制代码 代码如下://正确1<div> <img src="#" alt="#"></div>//正确2<div><img src="#" alt="#"><!-- 这里要折行或空格 --></div>//错误<div><img src="#" alt="#"></div> 【3】图片完全垂直居中在方法2的基础上设置块级元素的font-size为0，则可以设置图片完全垂直居中 复制代码 代码如下:div{ line-height: 200px; text-align: center; font-size: 0;}img{ vertical-align: middle;} 复制代码 代码如下:<div> <img src="#" alt="#"></div> 【4】多行文本水平垂直居中由于方法3设置font-size为0的局限性，块级元素里面无法放置文本。方法4主要通过新增元素来实现垂直居中效果，该方法也可用于图片的水平垂直居中
XML/HTML Code复制内容到剪贴板
div{ height: 100px; width: 200px; background-color: pink; text-align: center; } span{ display:inline-block; vertical-align: middle; line-height: 20px; width: 100px; } i{ display: inline-block; height: 100%; vertical-align: middle; }
XML/HTML Code复制内容到剪贴板
<div> <i></i><span>我是特别长的特别长的特别长的特别长的多行文字</span> </div> 【5】图标和文本对齐 <方法一>使用长度负值 复制代码 代码如下:img{ vertical-align: -5px;} 根据实践经验，20*20像素的图标后面跟14px的文字，vertical-align设置为-5px可以达到比较好的对齐效果 <方法二>使用文本底部对齐 复制代码 代码如下:img{ vertical-align: text-bottom;} 使用baseline会使图标偏上；使用top/bottom会受到其他行内元素影响造成定位偏差；使用middle需要恰好的字体大小且兼容性不高；使用text-bottom较合适，不受行高及其他内联元素影响 （编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |