图片和文字 并没在div垂直居中啊，求解释？不懂

                        .div1{width: 200px;height: 100px;border: 1px solid black;}

.div1 span{display: inline-block;width: 140px;vertical-align: middle;}

.div1 img{vertical-align: middle;}

                <div class="div1">

<span>哈哈</span>

<img src="img/des_sm.jpg" />

</div>

图片和文字 并没在div垂直居中啊，求解释？不懂