移动端图文水平垂直居中

by hezhi

HTML

<ul>
	<li><a href="">
		<div class="wrap">
			<div class="pic"><img src="http://www.gbtags.com/gb/laitu/200x200/dd4814/ffffff">	</div>
			<div class="txt">自适应<br></div>
		</div>		
	</a></li>
	<li><a href="">
		<div class="wrap">
			<div class="pic"><img src="http://www.gbtags.com/gb/laitu/200x200/dd4814/ffffff">	</div>
			<div class="txt">自适应<br>自适应<br></div>
		</div>	
	</a></li>
	<li><a href="">
		<div class="wrap">
			<div class="pic"><img src="http://www.gbtags.com/gb/laitu/200x200/dd4814/ffffff">	</div>
			<div class="txt">自适应<br>自适应<br>自适应<br></div>
		</div>	
	</a></li>
	<li><a href="">
		<div class="wrap">
			<div class="pic"><img src="http://www.gbtags.com/gb/laitu/200x200/dd4814/ffffff">	</div>
			<div class="txt">自适应<br></div>
		</div>	
	</a></li>
</ul>

CSS

*{margin: 0;padding: 0;list-style: none;}
ul{width: 100%;}
li{width: 50%;float: left;border:5px solid transparent;box-sizing:border-box;}
li a{display: block;padding:10px 0;border: 1px solid #000;}
ul li .wrap{display: table;text-align: center;margin:0 auto;}
ul li .pic{text-align: right;width: 50%;display:table-cell;vertical-align: middle;}
ul li .txt{display:table-cell;text-align: left;padding-left: 5px;vertical-align: middle;width: 50%;}
ul li .pic img{width:80%;height: auto;max-width: 100px;min-width:50px;border: none;}