vertical align images

HTML

<div id="test">
		<div class="section">
			<img src="http://lorempixel.com/100/50" height="30px" alt="" /><span>vs.</span>
            <img src="http://lorempixel.com/100/50" height="30px" alt="" />
		</div>
    </div>

CSS

#test  {
	font-size: 30px;
	line-height: 40px;
	width: 980px;
	margin: 20px auto 10px auto;
	padding: 0;
	position: relative;
	background: #7B0000;
}

#test .section { 
	float: left; 
	line-height: 40px;
	display: block;
	padding: 0 20px;
}
#test .section:last-child { float: none; }
#test .section:first-of-type { padding-left: 180px; }
#test img { vertical-align: middle; }
#test .section span { display: inline-block; height: 100%; }

JavaScript

var i;