理解vertical-align
vertical-align 支持的属性值及组成
- inherit
- 线类
baseline, top, middle, bottom - 文本类
text-top, text-bottom - 上标下标类
sub, super - 数值百分比类
20px, 2em, 20%, ...
我们先来看看数值百分比类，这个类其实可以分为数值类和百分比类这两个小类。
这两个小类的共性：
- 都带数字
- 都支持负值（在CSS中，支持负值的属性有margin, letter-spacing, word-spacing, vertical-align）
- 行为和表现一致
数值类就是在 baseline 对齐基础上上下偏移对应数值大小，如 vertical-align: 1px; 就是在基线的基础上上移1px。而vertical-align 的百分比值是相对于 line-height 计算的，例如某元素的line-height 是20px, vertical-align:25% 相当于设置vertical-align: 5px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
background-color: #ccc;
}
#p2{
line-height: 100px;
}
#span1{
vertical-align: 10px;
}
#span2{
vertical-align: 100%;
}
</style>
</head>
<body>
<section>
<p id="p1">
<img src="./123.jpg" /><span id="span1">xxxxxxx</span>
</p>
<p id="p2">
<img src="./123.jpg" /><span id="span2">xxxxxxx</span>
</p>
</section>
</body>
</html>
效果如下：
vertical-align 起作用的前提
vertical-align 只能应用于inline水平以及‘table-cell’元素。
inline水平元素主要有：
- inline：<img>, <span>, <strong>, <em>，...
- inline-block：<input>, <button>, ...
'table-cell' 元素有：
- table-cell：<td>
但是下面方式：
display：更改元素的显示水平
css 声明间接更改元素的显示水平,如下面代码
<style> p{ background-color: #ccc; } #img1{ float: left; vertical-align: middle; } </style> <section> <p> <img id="img1" src="./123.jpg" /><span>xxxxxxx</span> </p> </section>
效果如下，图片浮动了，其display水平变成block，因此 vertical-align 失效了。
再如：
<style> p{ background-color: #ccc; } #img1{ position:absolute; vertical-align: middle; } </style> <section> <p> <img id="img1" src="./123.jpg" /><span>xxxxxxx</span> </p> </section>
效果如下图，文字跑到图片后面去了，此时图片display水平也是block。
下面还有一个vertical-align 失效的例子。
<style> p{ height: 300px; text-align: center; background-color: #ccc; } #img1{ vertical-align: middle; } </style> <section> <p> <img id="img1" src="./123.jpg" /> </p> </section>
效果如下，图片没有垂直居中。
其实不是vertical-align: middle没起作用，而是太短，不够居中，将行高设为容器高度值就可以解决了。
p{ height: 300px; line-height: 300px; text-align: center; background-color: #ccc; }
实现个数不定文字内容和图片垂直居中对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
background-color: #ddd;
width: 800px;
margin: 0 auto;
}
li{
list-style: none;
margin-bottom: 10px
}
span{
display: inline-block;
width: 400px;
vertical-align: middle;
}
img{
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<span>一段文字，一段文字,一段文字，一段文字一段文字，一段文字</span>
<img src="./123.jpg"/>
</li>
<li>
<span>一段文字，一段文字</span>
<img src="./123.jpg"/>
</li>
<li>
<span>一段文字，一段文字</span>
<img src="./123.jpg"/>
</li>
</ul>
</div>
</body>
</html>
vertical-align 与 line-height
vertucal-align 和 line-height 之间的关系很明确，即“朋友”关系。如下面几个例子
- vertical-align 的百分比值是相对于 line-height 计算的
- 只要出现内联元素，这对好朋友就会出现。
例如容器高度不等于行高的例子，就是vertucal-align 和 line-height 搞的鬼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#div1{
line-height: 32px;
background-color: #ccc;
}
#div1 > span{
font-size: 24px;
}
</style>
</head>
<body>
<div id="div1">
x<span>文字x</span>
</div>
</body>
</html>
效果如下
我们可以看到，容器高度为35px, 行高是32px，左右两边的x大小不相同。为什么会这样呢？有一个很关键的点，那就是font-size: 24px 是设置在span元素上的，导致外部div与span字体大小有出入。
由于受line-height:32px 影响，这两个内联盒子高度都是32px，我们应该知道，对字符而言，font-size 越大字符的基线越往下，因为文字默认全部是基线，所以当字号大小不一样的两个文字在一起时，就会发生上下位移，如果位移距离足够大，就会超过行高的限制，而导致意料之外的容器高度，如下图。
搞清楚原因，我们就能找到解决办法了。关于隐匿文本节点和内联盒子，可以参见上一篇。
方法一：我们可以让隐匿文本节点和后面span元素字号一样大
<style> #div1{ line-height: 32px; font-size: 24px; background-color: #ccc; } #div1 > span{ font-size: 24px; } </style>
方法二：改变垂直对齐，比如顶部对齐，这样就不会有参差位移。
<style> #div1{ line-height: 32px; background-color: #ccc; } #div1 > span{ font-size: 24px; vertical-align: top; } </style>
