一、在页面布局里,居中问题是非常常见的!
1.有宽度的块级元素水平居中对齐,是margin:0 auto;
2.让文字居中对齐,是text-align:center;
而 vertical-align:垂直对齐,它只针对行内元素或者行内块元素
先看w3c的官方说明:
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
3.先理解下基线是什么
基线的位置并不是固定的:
在文本之类内联元素中,基线是字符x的下边缘位置
在像
img
元素中基线就是下边缘。在
inline-block
元素中,也分两种情况
如果该元素中有内联元素,基线就是最后一行内联元素的基线。
如果该元素内没有内联元素或者overflow不是visible,其基线就是margin的地边缘。
二:vertical-align 属性的用法
1. 在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
td {
vertical-align: middle;
}
2.该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
案例一:
<!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>
.app {
width: 200px;
height: 196px;
box-sizing: border-box;
border: 1px solid red;
}
img {
width: 100px;
height: 100%;
/* vertical-align: text-bottom; */
}
</style>
</head>
<body>
<div class="app">
<img src="./1.jpg" alt=""> 文字gx
</div>
</body>
</html>
运行结果:
造成文字超出盒子的原因是img标签的的基线是下边缘线,而文字的基线是字母x的下边缘线,如果我们想让文字不超出盒子,就可以利用vertical-align属性
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
在这里行内元素的基线就是字母x的下边缘线,该元素所在行的基线就是图片下边缘线
所以我们可以为该元素(img)设置vertical-align属性从而影响行内元素的基线(文字的基线)
img {
width: 100px;
height: 100%;
vertical-align: text-bottom;
}
给img增加vertical-align: text-bottom后会使文字的基线从字母x的下边缘线变为文字的下边缘线对齐img的基线(img的下边缘线)
运行结果:
案例二:
<!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>
.app {
box-sizing: border-box;
width: 400px;
height: 400px;
border: 2px solid red;
/* display: table; */
/* font-size: 0; */
}
.first {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
/* vertical-align: middle; */
}
.second {
display: inline-block;
width: 30px;
height: 30px;
background-color: pink;
}
</style>
</head>
<body>
<div class="app">
<div class="first"></div>
<div class="second"></div>
</div>
</body>
</html>
给两个div设置属性 display: inline-block后,两个盒子的基线都是盒子的下边缘线,如果我想让第二个div向上移动,就可以通过给第一个div设置 vertical-align: middle从而影响第二个div的基线,使第二个div向上移动
vertical-align: middle的意思是使第二个div的基线对齐第一个div的中垂线
.first {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
vertical-align: middle;
}
执行后:
三: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>
ul {
border: 2px solid red;
}
li {
display: inline-block;
height: 200px;
width: 50px;
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
执行结果:
可以看到为每个li设置display: inline-block后,在水平排列了,但是底部距离有一点间隙,这就可以为li在垂直方向上设置vertical-align: middle
当只在第一个li设置vertical-align: middle时
可以看到底部间隙已经消失了,但是排版错了,这时可以为每个li都设置vertical-align: middle
li {
display: inline-block;
height: 200px;
width: 50px;
background-color: pink;
vertical-align: middle;
}
运行: