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

推荐 方式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>

最终效果

你有什么好的方式呢？