vertical-align属性笔记
2017-03-03 16:31
204 查看
定义
MDN的定义是:用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式如果元素没有基线baseline,则以它的外边距的下边缘为基线。
可替换元素
定义(MDN)是:外观渲染独立于css的外部对象,展示不由css来控制。其中一些元素,如:img,video,input,textarea,本身有尺寸和基线(baseline),就需要使用vertical-align来与父元素对齐。
实例:
html代码:<div> Writer <img src="img/pic02.jpg" class="img1" /> <span class="span">span元素</span> <img src="img/pic03.jpg" class="img2" /> </div>
取值为默认值:baseline
css代码:
div { border: 1px solid black; width: 1000px; height: 200px; font-size: 50px; margin: 0 auto; } .img1 { width: 150px; vertical-align: baseline; } .img2 { width: 250px; height: 150px; } .span { width: 250px; height: 80px; background-color: yellow; display: inline-block; }
展示效果:
上面的代码就相对于给img元素加上了:vertical-align:baseline
取值为:top
为img元素加上vertical-align:top属性值,显示结果为:
上面的图片从左数,第二张图片是vertical-align:baseline,父元素里面的内容(除第一张图片)还是和第二张图片的底部对齐,然后第一张图片与父元素中最高的元素顶部对齐,即第二张图片。
3 取值:text-top
元素的顶部与父元素字体的顶部对齐
4 取值:middle
展示效果:
参考资料:http://www.cnblogs.com/hykun/p/3937852.html
相关文章推荐
- CSS实例:vertical-align属性让网页层居中
- vertical-align 属性详解 【转】
- 垂直对齐:vertical-align属性(转)
- vertical-align各属性对比
- 学习笔记之 vertical-align
- 7.4 垂直对齐:vertical-align属性
- 简单理解css中的垂直居中和水平居中,即vertical-align和text-align属性
- CSS属性探秘系列(四):vertical-align
- vertical-align属性的一些理解与认识
- 垂直对齐:vertical-align属性——使用中注意事项
- 垂直对齐:vertical-align属性(转)
- CSS 的 vertical-align 属性
- css 垂直对齐 css中vertical-align属性(垂直对齐)的使用说明
- css的vertical-align属性
- table支持vertical-align属性
- 垂直对齐:vertical-align属性(转贴)
- CSS属性Vertical Align使用方法讲解
- CSS之vertical-align属性测试
- vertical-align:top属性
- 解决图片浮动调节不了的问题(使用vertical-align属性)