首页 > 代码库 > css3 的vertical-align——我的理解
css3 的vertical-align——我的理解
在下才疏学浅，不足之处，还请多多指教。
vertical-align 是css中很有用的一个属性，常用在checkbox和文字的对齐，图片的对齐等位置。
需要注意的是：需要有一个元素属于 inline 或 inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用，其实很好理解，为 block 的元素直接独自占一行，不需要对齐。
常见的 vertical-align用法：middle（中线对齐），top(把元素的顶端和最高的元素顶端对齐)，2px(上下的高度)。
见如下代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .test{ vertical-align:2px; } </style></head><body> <span> <input type="checkbox"> <label class="test">记住我</label> </span></body></html>
执行效果如下
接下来看一个图片对齐的：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> img{ width: 600px; height:300px; vertical-align:middle; } </style></head><body> <img src="http://www.mamicode.com/jsmode/img/1.jpg" >123213 <span class="test">记住我</span></body></html>
执行效果如下
通过demo，我们知道 img，span是 行间元素
其实块级元素是为数不多的：<div><h1><p><table><ul><from>
css3 的vertical-align——我的理解
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。