文本图片的对齐方式

最新推荐文章于 2023-10-15 16:50:58 发布

微笑边缘的金元宝

最新推荐文章于 2023-10-15 16:50:58 发布

阅读量532

点赞数

分类专栏： html 文章标签：文本和图片的对齐方式

html 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

方法来源：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>&#8203;<img src='1.png' /></span>文本1 -->
 <!-- 方法三 -->
 <!-- <span><img src='1.png' /></span> -->
  </div>
 </body>
</html>