为何一样的代码却只实现了垂直方向上的效果，水平方向上没有相对应的效果？
<head>
<title>验证vertical-align</title>
<style type="text/css">
img{vertical-align:middle;}
i{display:inline-block;height:100%;vertical-align:middle;}
</style>
</head>
<body>
<p style="height:200px;background:#999;">
<img src="images/lingzi.jpg" alt="mm" style="height:120px;width:150px;" /><i></i>
</p>
</body>
