中心文本和子彈 <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>