文本图片的对齐方式
程序员文章站
2022-04-26 15:58:16
...
方法来源：https://www.w3cplus.com/css/icon-align-to-text.html
案例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
/* 方法1 */
/* span{
position:relative;
display:inline-block;
line-height:1;
width:1em;
}
span img{
position:absolute;
top:0;
left:0;
width:1em;
height:1em;
} */
/* 方法2 */
/*span {
display: inline-flex;
align-items: center;
}
span img{
width:2em;
height:2em;
} */
/* 方法3 */
/* span {
display: inline-flex;
align-items: center;
}
span img{
width:1em;
height:1em;
}
span::after{
content:'文本';
} */
</style>
</head>
<body>
<div>
<!-- 方法1 --><!-- 方法2 -->
<!-- <span>​<img src='1.png' /></span>文本1 -->
<!-- 方法三 -->
<!-- <span><img src='1.png' /></span> -->
</div>
</body>
</html>
上一篇： flex（弹性布局）主轴对齐方式
下一篇： HTML/CSS居中对齐的方式大全