vertical-align属性笔记

定义

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>

---

1. 取值为默认值：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

---

1. 取值为：top

---

为img元素加上vertical-align:top属性值,显示结果为:

上面的图片从左数,第二张图片是vertical-align：baseline，父元素里面的内容（除第一张图片）还是和第二张图片的底部对齐，然后第一张图片与父元素中最高的元素顶部对齐，即第二张图片。

---

3 取值：text-top

---

元素的顶部与父元素字体的顶部对齐

4 取值：middle

---

展示效果：

参考资料：http://www.cnblogs.com/hykun/p/3937852.html