vertical-align：middle 失效解决方法

    学姐给我布置作业叫我实现内联元素的垂直居中，我以为很简单，于是找到了vertical-align:middle  

<div id="method2">
<img id="test" src="img/Dota2.jpg" alt="dota2">
</div>

       给div设置高度后

我对#test设置vertical-align:middle    竟然不能垂直居中，，img也是内联元素，为什么不能垂直居中呢，没想到楼上大三的大佬说加个辅助inline-block的元素才行，因为

vertical-align:middle  是依赖div内子元素最高的行高来实现对某元素居中的，而我们只需要建立一个新元素，给他加上inline-block属性 再把他高度设置为100%就行了

$('#method2').css('text-align','center')
$supSpan=$("<span></span>");
$supSpan.attr('style','height:100%;display:inline-block;vertical-align:middle')
$('#method2').prepend($supSpan)
$('#method2 img').css('vertical-align','middle')