按照惯性思维水平居中很简单，text-align: center; 垂直居中也不难，line-height的值等于height的值。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <link rel="stylesheet" type="text/css" href="css/base.css">
7 <style>
8 .content{
9 width: 400px;
10 height: 120px;
11 line-height: 120px;
12 font-size: 20px;
13 text-align: center;
14 background: #00eeff;
15 }
16 .content>img{
17 width: 100px;
18 height: 100px;
19 vertical-align: middle;
20 display: inline-block;
21 }
22 </style>
23 </head>
24 <body>
25 <div class="content">
26 <img src="img/logo.jpg">
27 </div>
28 </body>
29 </html>
效果图:
不难发现图片在垂直方向，与父容器的垂直距离并不相等。那么这是为什么？
w3c上是这样解释的：
vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
这里就需要了解到基线和ex的概念。基线并不是汉字文字的下端沿，而是英文字母“x”的下端沿。ex 相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。但是不难发现，中线并不是距离基线上半个ex的位置。而且ex与字体大小有关。那么猜测是否是因为字体大小，影响到了图片垂直居中。
那么尝试把font-size设置为0。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <link rel="stylesheet" type="text/css" href="css/base.css">
7 <style>
8 .content{
9 width: 400px;
10 height: 120px;
11 line-height: 120px;
12 font-size: 0px;
13 text-align: center;
14 background: #00eeff;
15 }
16 .content>img{
17 width: 100px;
18 height: 100px;
19 vertical-align: middle;
20 display: inline-block;
21 }
22 </style>
23 </head>
24 <body>
25 <div class="content">
26 <img src="img/logo.jpg">
27 </div>
28 </body>
29 </html>
然后神奇的垂直居中了。
（未完待续）
时间： 2024-12-10 05:00:37