【HTML+CSS】文字和图片保持同一水平线的三种方式

前端鹏哥

于 2020-07-10 17:51:12 发布

阅读量6.3k

点赞数 2

本文链接：https://blog.youkuaiyun.com/weixin_38415876/article/details/107258092

版权

本文介绍了如何使用HTML和CSS将文字与图片保持在同一水平线上，包括表格单元格方式、Flex布局方式和绝对定位方式。针对不同场景，提供了相应的代码示例，确保在图片大小变化时仍能保持对齐。

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

推荐方式2

方式1比较老
方式3 代码比较多图片大小改变的话对应的margin-top就得修改

方式1.table-cell方式
方式2.flex方式
方式3.absolute方式

css

.wechart1{
				display: block;
				display: table-cell;
				background: #fff;
				width: 100%;
				margin-bottom: 10px;
			}
			.wechart1 img{
				width: 30px;
				vertical-align: middle;
			}
			.wechart2{
				margin-top: 10px;
				display: flex;
				align-items: center;
				background: #fff;
				margin-bottom: 10px;
			}
			.wechart2 img{
				width: 30px;
			}
			.wechart3{
				background: #fff;
				width: 100%;
				margin-bottom: 10px;
				position: relative;
				
				padding: 20px;
				padding-left: 40px;
			}
			.wechart3 img{
				height: 30px;
				vertical-align: middle;
				position: absolute;
				top:50%;
				margin-top: -15px;
				left: 0px;
			}

html

<p>wechart1</p>
				<div class="wechart1">
					<img src="images/wechart.png" >微信登录
				</div>
				<p>wechart2</p>
				<div class="wechart2">
					<img src="images/wechart.png" >微信登录
				</div>
				<p>wechart3</p>
				<div class="wechart3">
					<img src="images/wechart.png" >微信登录
				</div>