您的位置：首页 > Web前端 > CSS

HTML和CSS进阶：深入vertical-align

2016-09-23 00:00 567 查看

来源： http://www.w3cfuns.com/notes/33234/4e00242a93a05fc54adc4a1c5eaef8ed.html

vertical-align，很多人对这个属性感到很陌生，也不知道怎么去使用，其实这都是由于没有深入属性的本质所导致的。vertical-align属性非常复杂，但是也相当强大。这一节给大家介绍vertical-align属性最实用的技巧，而对于不常用的东西则不进行深入研究。
W3C官方对vertical-align属性的定义有4个方面：
（1）vertical-align属性用于定义“周围的文字、inline元素以及inline-block元素”相对于该元素基线的垂直对齐方式。这里的“该元素”指的是被定义了vertical-align属性的元素；
（2）在表格单元格中，vertical-align属性可以定义单元格td元素中内容的对齐方式。td元素是table-cell元素，也就是说vertical-align属性对table-cell类型元素有效；
（3）vertical-align属性对inline元素、inline-block元素和table-cell元素有效，对block元素无效；
（4）vertical-align属性允许指定负长度值（如-2px）和百分比值（如50%）；
从上一节我们知道，每一行文字可以看成一个行盒子，其实每一个inline-block元素也可以看成一个行盒子。其中，每一个行盒子都有4条线：（1）顶线；（2）中线；（3）基线；（5）底线。这4条线跟英文簿中的4条线是相似的。

vertical-align属性中的“基线”跟line-height属性中的基线是一样的道理。在CSS中，vertical-align属性最见的属性值有4个：top（顶部对齐）、middle（中部对齐）、baseline（基线对齐）、bottom（底部对齐）。
一、 vertical-align属性取值
vertical-align属性取值有3种情况：（1）负值；（2）百分比；（3）关键字。
1、负值
vertical-align属性取值可以为负值，例如“vertical-align:-2px”表示元素相对于基线向下偏移2px。此方法常常用于解决单选框或复选框与文字垂直对齐的问题。对于这个技巧，我们在下一章“表单效果”会详细介绍。
2、百分比
vertical-align属性取值可以为百分比，这个百分比是相对于当前元素所继承的line-height属性值决定的。
举个例子，对于“vertical-align:50%”，假如当前元素所继承的line-height为20px，则“vertical-align:50%”实际上等价于“vertical-align:10px”。其中， vertical-align:10px”表示元素相对于基线向上偏移10px。
3、关键字
vertical属性取值可以为关键字，取值如下：
取值说明
top 顶部对齐
middle 中部对齐
baseline 基线对齐
bottom 底部对齐
除了以上这些，vertical-align属性取值还可以为text-top、text-bottom、super、sub等关键字。不过其他关键字在实际开发中很少用得上，因此我们只需要掌握top、middle、baseline、bottom这4个属性值就行。
举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>vertical-align属性</title>
<style type="text/css">
img{width:80px;height:80px;}
#img1{vertical-align:top;}
#img2{vertical-align:middle;}
#img3{vertical-align:bottom;}
#img4{vertical-align:baseline;}
</style>
</head>
<body>
绿叶学习网<img id="img1" src="images/girl.png" alt=""/>绿叶学习网（<strong>top</strong>）
<hr/>
绿叶学习网<img id="img2" src="images/girl.png" alt=""/>绿叶学习网（<strong>middle</strong>）
<hr/>
绿叶学习网<img id="img3" src="images/girl.png" alt=""/>绿叶学习网（<strong>bottom</strong>）
<hr/>
绿叶学习网<img id="img4" src="images/girl.png" alt=""/>绿叶学习网（<strong>baseline</strong>）
</body>
</html>

在浏览器预览效果如下：

分析：
根据W3C的定义“vertical-align属性用于定义周围文字、inline元素或inline-block元素的基线相对于该元素的基线的垂直对齐方式”。在这个例子中，vertical-align属性定义了周围的文字相对于img元素基线的垂直对齐方式。
此外，“vertical-align:baseline”和“vertical-align:bottom”是有区别的，请仔细观察预览效果。
二、vertical-align属性应用
我们从以下3个方面来介绍一下vertical-align属性的使用情况：（1）inline-block元素；（2）inline元素和block元素；（3）table-cell元素。
1、inline元素和inline-block元素
在HTML中，常见的inline-block元素有2个：img元素和input元素。对于这两个inline-block元素，我们一定要记住。
举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
strong
{
font-size:40px;
border:1px solid red;
}
span{font-size:12px;}
</style>
</head>
<body>
<span>绿叶学习网</span><strong>绿叶学习网</strong><span>绿叶学习网</span>
</body>
</html>

在浏览器预览效果如下：

分析：
当我们在CSS中为strong元素添加“vertical-align:center;”之后，浏览器预览效果如下：

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
img{vertical-align:middle;}
</style>
</head>
<body>
<div>绿叶学习网<img src="images/girl.png" alt=""/>绿叶学习网（<strong>middle</strong>）        </div>
</body>
</html>

在浏览器预览效果如下：

2、block元素
vertical-align属性对inline元素、inline-block元素和table-cell元素有效，对block元素无效。
举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div
{
vertical-align:middle;
width:120px;
height:120px;
border:1px solid gray;
}
</style>
</head>
<body>
<div><img src="images/girl.png" alt=""/></div>
</body>
</html>

在浏览器预览效果如下：

分析：
div是block元素，所以vertical-align属性对其无效。如果想要在div中实现图片的垂直居中，我们可以先为div定义“display:table-cell”，也就是将block元素转化为table-cell元素（表格单元格），然后再使用“vertical-align:middle”就可以实现了。
举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div
{
display:table-cell;
vertical-align:middle;
width:120px;
height:120px;
border:1px solid gray;
}
</style>
</head>
<body>
<div><img src="images/girl.png" alt=""/></div>
</body>
</html>

在浏览器预览效果如下：

分析：
在div中实现图片垂直居中是很常见的技巧，我们在后续章节会给大家介绍更多垂直居中的技巧。
3、table-cell元素
W3C定义：在表格单元格中，vertical-align属性可以定义单元格中内容的对齐方式。也就是说vertical-align属性对table-cell类型元素有效。
这里要注意一下，table-cell元素跟inline、inline-block元素使用vertical-align是有很大区别的：
（1）inline元素和inline-block元素的vertical-align是针对周围的元素来说，vertical定义的是周围元素相对于当前元素的对齐方式；
（2）table-cell元素的vertical-align属性是针对自身而言。vertical-align定义的是内部子元素相对于自身的对齐方式；
举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
td
{
width:120px;
height:120px;
border:1px solid gray;
vertical-align:middle;
}
</style>
</head>
<body>
<table>
<tr>
<td><img src="images/girl.png" alt=""/></td>
<td><img src="images/girl.png" alt=""/></td>
<td><img src="images/girl.png" alt=""/></td>
</tr>
</table>
</body>
</html>

在浏览器预览效果如下：

【后话】：这一章学习到的知识，估计已经狠狠地给那些天天自诩“精通CSS”的同学几巴掌了。原来，CSS也是如此的博大精深，并非我们想象中那么简单。对于HTML、CSS和JavaScript这3大核心技术，还是希望大家能够踏踏实实地深入研究，这样我们的前端之路才有可能走得更远。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航