css中的vertical-align用法
2017-08-27 18:44
429 查看
vertical-align分类:
1.线类:baseline top middle bottom2.文本类: text-top text-bottom
3.上标下标类: sub super
4.数值百分比类: 20px 2em 20%
vertical-align的百分比值是相对于line-height计算的,IE6/IE7下的vertical-align百分比值不支持小数的line-height。
vertical-align只能作用于inline以及table-cell元素。
inline: <img> <span> <strong> <em> inline-block:<input>(IE8+) <button>(IE8+)(IE7及以下认为其为inline元素) table-cell: <td>(作用于自身,给其子元素设置vertical-align并无效果。)
例1: table-cell应设置在父元素中。
<style> .div3{width:200px;height:100px;border: 1px solid skyblue;display: table-cell;vertical-align:middle;} .div3 span{background-color:silver;} </style> <div class="div3"><span>fdfe你好</span></div>
如图所示:
例2:文字和图片均居中对齐
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"/> <style> .div0{ height:300px; width:300px; border:1px solid skyblue; } span{ vertical-align: middle;display: inline-block;width:40px; } img{ vertical-align: middle; } </style> </head> <body> <div class="div0"> <span>文字文字文字</span> <img src="1.jpg"/> </div> </body> </html>
如图:
例3:图片底部出现一段空白。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"/> <style> .div0{ width:300px; background:skyblue; } </style> </head> <body> <div class="div0"> <img src="1.jpg"/> </div> </body> </html>
如图:
原因:图片本身是和baseline对齐的,即默认为: vertical-align: baseline; 解决办法: 1.给img设置: vertical-align设为top,middle或bottom 2.给父元素设置: line-height:0 3.给父元素设置: font-size:0 原理:相当于图片背后存 4000 在一个空白字符,出现底部空白的原因就是该空白字符占据了一定的空间, 当父元素设置line-height为0时,该字符的高度等同于line-height的高度,为0,因此不会占据空间。 font-size同理。
例4:近似实现图片居中
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"/> <style> .div0{ height:200px; width:200px; border:1px solid skyblue; line-height:200px;/*行高设为容器高度值,可使图片近似居中*/ } img{ vertical-align: middle; } </style> </head> <body> <div class="div0"><img src="1.jpg"/></div> </body> </html>
如图:
例5:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"/> <style> span{ display: inline-block; width:100px; height:100px; background: skyblue; } </style> </head> <body> <span></span> <span>11</span> </body> </html>
如图:
原因:没有内容的span基线为其底边缘,有内容的span以其内容的底边缘作为自己的基线,两个基线对齐,导致该状况的发生。
相关文章推荐
- css中vertical-align和line-height的用法
- css水平垂直居中的方法与 vertical-align 的用法
- CSS line-hight ,vertical-align,父元素高度以及行框,行内框的关系
- ↗☻【css】vertical-align
- css简写 vertical-align background font
- vertical-align 的用法
- 深入浅出CSS(一):line-height与vertical-align的性质
- CSS 行高与行对齐精解:line-height 和 vertical-align (图文)
- CSS 的 vertical-align 属性
- CSS标准:vertical-align属性
- CSS 实现文字、图片垂直对齐(vertical-align)
- CSS line-height 和 vertical-align 精解
- CSS深入理解vertical-align和line-height的基友关系
- vertical-align用法
- CSS中,display属性、行高属性line-height以及垂直对齐方式vertical-align属性详细探讨
- 【正视CSS 07】再看vertical-align
- 浏览器兼容CSS代码:按钮文字垂直居中(input button text vertical align)
- CSS深入理解vertical-align和line-height的基友关系
- CSS line-height 和 vertical-align 精解(上篇)
- CSS属性:vertical-align:middle,设置为什么无效!