中心文本和子弹 <li> 元件

Question

我正在通过这些挑战来提高我的CSS技能，而我在第一个问题上遇到了麻烦（见下图）。 强文

我可以将文本居中，但是子弹并没有以它为中心。 见JSFiddle

 li { text-align:center; } 

 <ul> <li>List Number 1</li> <li>List Number 2</li> <li>List Number 3</li> <li>List Number 4</li> <li>List Number 5</li> </ul> 

Answer 1

在你的css中添加这段代码。

li {
  text-align:center;
  list-style-type:none;
}
li:before{
  content:'\2022';
    margin-right:5px;    
}

这是演示： http ： //jsfiddle.net/gyQ2W/1/

Answer 2

使用:before伪元素:before 。 作为其中的content ，您可以放置​​图像，HTML字符等...更新您的小提琴

https://jsfiddle.net/shbfsoq6/2/

Answer 3

最简单的方法可能是将列表样式位置设置为内部。

 li { list-style-position: inside; text-align: center; } 

 <ul> <li>List Number 1</li> <li>List 2</li> <li>List Number 3</li> <li>List 4</li> <li>List Number 5</li> </ul>