当前位置: 代码迷 >> Web前端 >> 文本、input、img同路垂直居中
  详细解决方案

文本、input、img同路垂直居中

热度:393   发布时间:2012-06-26 10:04:13.0
文本、input、img同行垂直居中

文本、input、img在同一行时图片是靠上,文字、input靠下,只需设置容器vertical-align:middle、line-height、height,以及容器中元素vertical-align即可实现垂直居中,样式如下:

?

<style type='text/css'>
.content{vertical-align: middle; line-height: 50px; height: 50px;}
.content img{vertical-align: middle;}
.content input{vertical-align: middle;}
</style>
?

<div class="content">
	QQ黄钻特权等虚拟商品免费大赠送
	<img src="1.gif" />
</div>
<div class="content">
	<input type="button" value=" button ">
	<img src="1.gif" />
</div>
?
  相关解决方案