居中<li>元素的文本和项目符号

Question

我通过克服这些挑战来提高我的CSS技能，并且我遇到了第一个问题（见下图）。 强文

我可以将文字居中，但子弹并没有集中在它上面。见JSFiddle

＆＃13;

＆＃13;

li {
  text-align:center;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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伪元素。作为content，你可以放置图片，HTML字符等...更新你的小提琴

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

Answer 3

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;