html - 自定义 ul li，将元素符号居中对齐(作为文本)？

Question

我正在尝试创建自定义元素符号列表 (ul li)

我有这个:

ul {
    list-style: none;
    list-style-type: none;  
    padding: 0px;
    margin: 0px;
}

ul li {
    background-image: url(img/bullet.png);
    background-repeat: no-repeat;
    background-position: 0px 5px; 
    padding-left: 10px; 
}

结果文本:

o            some text
o         some other text
o    and again some other text

正文居中，我希望元素符号也居中对齐(紧挨着文本的左边) 文本对齐没有帮助

如何做到这一点？

Answer 1

您可以使用 :before 伪元素来渲染带有白色元素符号 unicode 字符 (\25e6) 的元素符号，如下所示:

ul li:before {        
  content:'\25e6';
  margin-right:5px;    
  vertical-align:middle;
  font-size:1.5em;
  line-height:0;
}

Demo.