HTML和CSS进阶：深刻vertical-align

时间 2019-11-12

标签 html css 进阶深刻 vertical align 栏目 HTML 繁體版

原文原文链接

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

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条线是类似的。html

vertical-align属性中的“基线”跟line-height属性中的基线是同样的道理。在CSS中，vertical-align属性最见的属性值有4个：top（顶部对齐）、middle（中部对齐）、baseline（基线对齐）、bottom（底部对齐）。
1、 vertical-align属性取值
vertical-align属性取值有3种状况：（1）负值；（2）百分比；（3）关键字。
  一、负值
vertical-align属性取值能够为负值，例如“vertical-align:-2px”表示元素相对于基线向下偏移2px。此方法经常用于解决单选框或复选框与文字垂直对齐的问题。对于这个技巧，咱们在下一章“表单效果”会详细介绍。
  二、百分比
vertical-align属性取值能够为百分比，这个百分比是相对于当前元素所继承的line-height属性值决定的。
举个例子，对于“vertical-align:50%”，假如当前元素所继承的line-height为20px，则“vertical-align:50%”实际上等价于“vertical-align:10px”。其中， vertical-align:10px”表示元素相对于基线向上偏移10px。
  三、关键字
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”是有区别的，请仔细观察预览效果。
2、vertical-align属性应用
咱们从如下3个方面来介绍一下vertical-align属性的使用状况：（1）inline-block元素；（2）inline元素和block元素；（3）table-cell元素。
一、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>

在浏览器预览效果以下：spa

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

举例：code

<!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>

在浏览器预览效果以下：xml

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

<!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中实现图片垂直居中是很常见的技巧，咱们在后续章节会给你们介绍更多垂直居中的技巧。
  三、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大核心技术，仍是但愿你们可以踏踏实实地深刻研究，这样咱们的前端之路才有可能走得更远。