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

最新推荐文章于 2021-11-10 15:38:14 发布

ngcsnow

最新推荐文章于 2021-11-10 15:38:14 发布

阅读量364

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： input img button

本文链接：https://blog.youkuaiyun.com/ngcsnow/article/details/84227160

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用CSS实现文本、输入框与图片在同一行中垂直居中的方法。通过设置容器及内部元素的vertical-align属性，配合line-height和height属性，可以轻松实现元素的垂直居中布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文本、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>