- 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')。
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

