html – 垂直居中>带子弹图像的文字？

发布时间：2020-12-14 18:41:06 所属栏目：资源来源：网络整理

导读：所以我试图弄清楚如何将我的一些文本与自定义项目符号图像垂直对齐.这是我有的： ul liLINE OF TEXT/li liLINE OF TEXT/li liLINE OF TEXT/li/ul 而对于CSS …… #div .class{ color: #4c361c; font-size: 13px; list-style-image: url(../images/image.png)

所以我试图弄清楚如何将我的一些文本与自定义项目符号图像垂直对齐.这是我有的：

<ul>
    <li>LINE OF TEXT</li>
    <li>LINE OF TEXT</li>
    <li>LINE OF TEXT</li>
</ul>

而对于CSS ……

#div .class
{
    color: #4c361c;
    font-size: 13px;
    list-style-image: url(../images/image.png);
}

#div .class li{ }

有没有人知道怎么做这个？

解决方法

这是一个 demo.

使用背景图像可以获得所需的效果.

HTML

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

CSS

ul {
    list-style: none;
}

ul > li {
  background: url('../imgpath/bullet-image.png') no-repeat left center;

  /* Adjust the padding for your custom bullet image */
  padding: 10px 0 10px 34px;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

html – 垂直居中&gt;带子弹图像的文字？

解决方法

html – 垂直居中>带子弹图像的文字？