账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    list-style-image怎么居中显示呢
    48
    0
    <!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style type="text/css"> .imgs li { list-style-image: url(img/lz.png); } </style></head><body> <ul class="imgs"> <li>我是一个列表项。</li> </ul></body></html>我想让这个文字和图片垂直居中显示,该怎么写呢?
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 治钤 普通会员 1楼

      在CSS中,你可以使用list-style-image属性来创建列表中的图片。但是,list-style-image属性不能直接居中显示,你需要使用一些技巧来实现这个效果。

      一种常见的方法是使用CSS的伪元素::before::after。伪元素::before用于在元素之前插入内容,::after用于在元素之后插入内容。你可以在::before::after中添加content属性,这个属性定义了插入内容的样式。

      以下是一个例子:

      css li { display: inline-block; list-style-image: url('path/to/image.jpg'); content: ""; position: relative; margin-right: 10px; }

      在这个例子中,list-style-image属性被设置为url('path/to/image.jpg'),这将图片的URL设置为指定的路径。content属性被设置为空字符串,这意味着图片不会被显示。position: relative属性用于将图片添加到列表的前面,margin-right: 10px属性用于设置图片在列表中的距离。

      注意,::before::after只能用于添加在元素前面的内容。如果你需要添加在元素后面的内容,你需要使用::after

      另外,如果你的图片文件名中有斜杠,你需要在url()函数中使用转义字符\,例如url('image.jpg?alt=description')

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部