- 有宽度的块级元素居中对齐，是margin: 0 auto;
- 文字居中对齐，是 text-align: center;
但是我们从来没有讲过有垂直居中的属性。
vertical-align 垂直对齐，它只针对于行内元素或者行内块元素。 【对于块级元素无效。】
vertical-align : baseline |top |middle |bottom
设置或检索对象内容的垂直对其方式。
-
注意：
vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，
特别是行内块元素， 通常用来控制图片/表单与文字的对齐。
3.1 图片、表单和文字对齐
所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。
图片默认和文字的基线对齐。
vertical-align: middle --> 垂直居中，让图片的中线 对齐 文字的中线
vertical-align: top --> 顶部对齐，让图片的顶线 对齐 文字的顶线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
100px;
height: 100px;
background-color: pink;
margin: auto;
vertical-align: middle;
}
</style>
</head>
<body>
<div>
你会失望的
</div>
</body>
</html>
3.2 去除图片底侧空白缝隙
- 原因：
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐，就是图片底侧会有一个空白缝隙。【4px】
-
解决的方法就是：
-
给 img 增加 vertical-align: middle | top| bottom等，让图片不要和基线对齐。
-
给img 添加 display：block; 转换为块级元素就不会存在问题了。
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
border: 1px solid red;
}
div img {
/*因为默认的是基线对齐，所有底册有空白缝隙*/
/*1. 只要不是 基线对齐就好了*/
/*vertical-align: baseline;*/
/*vertical-align: bottom;*/
/*vertical-align: middle;*/
/*2. 块级元素来说 vertical-align: 是无效的 就不会有基线对齐的问题了*/
display: block;
}
</style>
</head>
<body>
<div>
<img src="images/3.jpg" alt="">
</div>
</body>
</html>
