vertical align images

by blackhawx

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  {
    position:relative;
	width: 980px;
	margin: 20px auto 10px auto;
	padding:0;
	position: relative;
	background: #7B0000;
    border:solid 1px blue;
}

#test .section { 
	display:block;
    position:relative;
	padding:10px 0;
    margin:0;
}
#test .section:last-child { float: none; }
#test .section:first-of-type { padding-left: 180px; }
#test img { padding:0; margin:0; display:inline-block; height:30px; vertical-align: middle; position:relative; top:50%; }
#test .section span {position:relative; left:3px; top:50%; display: inline-block;} }

#test .span {
   
}
}

JavaScript

var i;