测试图片随文字上下居中

时间 2021-01-20 标签居中图片文字图片文字上下居中
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试图片随文字上下居中</title>
</head>
<style>
	*{
		margin: 0;
		padding: 0;
	}
	.aui-flex {
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    align-items: center;
	    padding: 15px;
	    position: relative;
	}
	.aui-flex-card-img {
	    width: 130px;
	    height: 80px;
	    margin-right: 10px;
	}
	.aui-flex-card-img img {
	    width: 100%;
	    height: auto;
	    display: block;
	    border: none;
	}
	.aui-flex-box {
	    -webkit-box-flex: 1;
	    -webkit-flex: 1;
	    flex: 1;
	    min-width: 0;
	    font-size: 15px;
	    color: #333;
	}
	.aui-flex-box h3 {
	    font-size: 16px;
	    padding-bottom: 10px;
	}
	.aui-flex-box p {
	    font-size: 14px;
	    color: #999;
	}
	.b-line:after {
	    content: '';
	    position: absolute;
	    z-index: 2;
	    bottom: 0;
	    left: 0;
	    width: 100%;
	    height: 1px;
	    border-bottom: 1px solid #e2e2e2;
	    -webkit-transform: scaleY(0.5);
	    transform: scaleY(0.5);
	    -webkit-transform-origin: 0 100%;
	    transform-origin: 0 100%;
	}

</style>
<body>
	<a href="javascript:;" class="aui-flex b-line">
        <div class="aui-flex-card-img">
            <img src="https://cs.m.xczhihui.com/xcview/images/geren.jpg" alt="">
        </div>
        <div class="aui-flex-box">
            <h3>测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中测试图片居中</h3>
        </div>
    </a>
</body>
</html>