问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

before伪元素嵌入图片处置对齐

头像
浴火小青春
    65732129
    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style type="text/css">
div{
  width:200px;
  height:100px;
  border:1px solid black;
  position:relavite;
}
span:before{
  content:url(http://1.yuhuo.sinaapp.com/atel.png);
}
</style>
</head>
<body>
  <div>
  <span>手机</span>
  </div>
</body>
</html>

    在这里也可以看到，例子

    ，想让插入的图标能够和文字垂直对齐（也就是给img 设置align=“middle"的效果，请问应该怎样实现呢）

    csscss-hack
    阅读 29k
    1 个回答
    得票最新
    头像
    浴火小青春
      65732129
      ✓ 已被采纳
      div{
  width:200px;
  height:100px;
  border:1px solid red;
}
span::before{
  content:url(http://1.yuhuo.sinaapp.com/atel.png);
 vertical-align:middle;
  display:inline-block;
}

      把伪元素设置成inline-block,然后再加上vertical-align:middle就解决了

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏