css html深入,HTML和CSS进阶：深入vertical-align

最新推荐文章于 2024-08-11 20:51:44 发布

weixin_39695490

最新推荐文章于 2024-08-11 20:51:44 发布

阅读量739

点赞数

文章标签： css 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个属性值就行。

举例：

vertical-align属性

img{width:80px;height:80px;}

#img1{vertical-align:top;}

#img2{vertical-align:middle;}

#img3{vertical-align:bottom;}

#img4{vertical-align:baseline;}

绿叶学习网绿叶学习网(top)

绿叶学习网绿叶学习网(middle)

绿叶学习网绿叶学习网(bottom)

绿叶学习网绿叶学习网(baseline)

在浏览器预览效果如下：

分析：

根据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元素，我们一定要记住。

举例：

strong

{

font-size:40px;

border:1px solid red;

}

span{font-size:12px;}

绿叶学习网绿叶学习网绿叶学习网

在浏览器预览效果如下：

分析：

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

举例：

img{vertical-align:middle;}

绿叶学习网

绿叶学习网( middle)

在浏览器预览效果如下：

2、block元素

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

举例：

div

{

vertical-align:middle;

width:120px;

height:120px;

border:1px solid gray;

}

在浏览器预览效果如下：

分析：

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

举例：

div

{

display:table-cell;

vertical-align:middle;

width:120px;

height:120px;

border:1px solid gray;

}

在浏览器预览效果如下：