设置图片垂直居中line-height和vertical-align的区别
设置图片水平居中line-height和vertical-align的区别
先看一个案例：目的是使图片相对于模块垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
background-color: rgb(194, 78, 240);
overflow: hidden;
}
div ul {
list-style: none;
}
div ul li {
float: left;
height: 45px;
line-height: 45px;
}
div ul li:nth-child(1) {
width: 8%;
}
div ul li:nth-child(1) img {
width: 10px;
}
div ul li:nth-child(2) {
width: 10%;
}
div ul li:nth-child(2) img {
width: 30px;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<img src="images/close.png" alt="">
</li>
<li>
<img src="images/logo.png" alt="">
</li>
<li>33</li>
</ul>
</div>
</body>
</html>
案例效果：
案例分析：
虽然代码中设置了了line-height的值为父元素的高，但是可以看到第一个图标是垂直居中了的，第二个图标是没有垂直居中的，这又是为什么呢？
因为在line-height属性中图片默认是和文字的基线对齐的
那对于图片默认和文字的基线对齐的情况，如果我们想自定义垂直方向上的对齐方式改怎样呢？
在CSS中有个属性vertical-align是设置垂直方向上的对齐方式的，我们只需要在同一行的任一个选择器，或者父亲节点的样式上设置改属性就行。
vertical-align属性值：
下面我们将图片设置为vertical-align:middle再来看看效果（设置图片垂直居中）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
background-color: rgb(194, 78, 240);
overflow: hidden;
}
div ul {
list-style: none;
}
div ul li {
float: left;
height: 45px;
line-height: 45px;
}
div ul li:nth-child(1) {
width: 8%;
}
div ul li:nth-child(1) img {
width: 10px;
}
div ul li:nth-child(2) {
width: 10%;
}
div ul li:nth-child(2) img {
vertical-align: middle;
width: 30px;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<img src="images/close.png" alt="">
</li>
<li>
<img src="images/logo.png" alt="">
</li>
<li>33</li>
</ul>
</div>
</body>
</html>
总结：
当设置了line-height属性发现图片没有垂直居中，这时候因该还要设置vertical-align属性，单独设置vertical-align属性是不能使图片垂直居中的，vertical-align要和line-height属性一起使用。