css中的vertical-align用法

来源：互联网发布：淘宝十元包邮怎么赚钱编辑：程序博客网时间：2024/06/05 23:08

vertical-align分类：

1.线类：baseline top middle bottom
2.文本类: 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或bottom2.给父元素设置: line-height:03.给父元素设置: font-size:0原理：相当于图片背后存在一个空白字符，出现底部空白的原因就是该空白字符占据了一定的空间，当父元素设置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以其内容的底边缘作为自己的基线，两个基线对齐，导致该状况的发生。

阅读全文

0 0