vertical-align使图片垂直居中的小细节 – CSS – 前端，手机网页css样式

css前端，css的outline，css改变text大小，css设置为块元素，css中图片的大小，css实现图标上文字，手机网页css样式 vertical-align使图片垂直居中的小细节 - CSS - 前端，手机网页css样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
div{
margin-top: 50px;
height: 400px;
line-height: 400px;
text-align: center;
background-color: #A2A590;
}
div img{
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<img src="styles/images/xlf.jpg" alt="logo" id="logo" />
</div>
</body>
</html>

这段代码中xlf.jpg是一个200*200的图片，以下为输出结果：

css前端，css的outline，css改变text大小，css设置为块元素，css中图片的大小，css实现图标上文字，手机网页css样式

看上去是不是居中显示了？其实并不是，大家将div的高度设置小一点看看：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
div{
margin-top: 50px;
height: 210px;
line-height: 210px;
text-align: center;
background-color: #A2A590;
}
div img{
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<img src="styles/images/xlf.jpg" alt="logo" id="logo" />
</div>
</body>
</html>

css前端，css的outline，css改变text大小，css设置为块元素，css中图片的大小，css实现图标上文字，手机网页css样式

是不是可以看出来图片明显没有居中？

那么这是为什么呢？
在css权威指南中是这么说的：
vertical-align:middle这个值通常适合于图像，因为它使元素的纵向的中点对齐本行的“中间”。行的中间定义为基线以上半个ex处的那个点，而ex的值源于父元素的字体尺寸。在实际应用中，因为大多数用户代理将1ex等同于0.5em，middle将会是元素的纵向重点与父元素基线以上四分之一em处的一个点对齐。
要理解这里首先要清楚基线和ex的概念。基线并不是汉字文字的下端沿，而是英文字母“x”的下端沿。而ex则指的是小写字母“x”的高度。那么结合下图来看：
css前端，css的outline，css改变text大小，css设置为块元素，css中图片的大小，css实现图标上文字，手机网页css样式

不难看出ex与字体大小相关，而且基线上0.5ex处并不是中线的所在，因而会产生之前的偏差。大家可以通过增大字体来验证这个猜想是否正确：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
div{
margin-top: 50px;
height: 210px;
line-height: 210px;
font-size: 80px;
text-align: center;
background-color: #A2A590;
}
div img{
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<img src="styles/images/xlf.jpg" alt="logo" id="logo" />
</div>
</body>
</html>

css前端，css的outline，css改变text大小，css设置为块元素，css中图片的大小，css实现图标上文字，手机网页css样式

发生了明显的偏差。

所以解决这个小bug的方法就是设置字体大小为0。如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
div{
margin-top: 50px;
height: 210px;
line-height: 210px;
font-size: 0;
text-align: center;
background-color: #A2A590;
}
div img{
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<img src="styles/images/xlf.jpg" alt="logo" id="logo" />
</div>
</body>
</html>

结果如图：

css前端，css的outline，css改变text大小，css设置为块元素，css中图片的大小，css实现图标上文字，手机网页css样式