老师，麻烦请看代码是否正确？
请问：如果都用vertical-align：minddle的话为什么还要说针对.....居中显示？
为什么：在.two中没有写vertical-align：minddle，.three中写vertical-align：16px,感觉效果更贴近要求？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<style type="text/css">
/*写出CSS样式*/
div{text-align:center;
background:#eee;
font-size:2em;
line-height:5em;
}
.one{vertical-align:middle;}
.two{font-size:2em;
vertical-align:middle;
}
.three{vertical-align:middle;
color:red;
text-decoration:underline;
}
</style>
</head>
<body>
<!--写出html代码-->
<div>
<span class="one"><img src="http://img1.sycdn.imooc.com/climg//59c21bae000157fa01000059.jpg"></span>
<span class="two">CSS层叠样式表</span>
<span class="three">(Cascading Style Sheets)</span>
</div>
</body>
</html>
正在回答
你好，测试结果看起来图片没有垂直居中显示：
其实外面盒子span标签是居中显示的，只不过图片不能将内联元素span撑起来，所以图片看起来没有垂直居中显示，可以将span盒子去掉：
效果：
自己可以重新测试下，祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星