如何在列表项的中心放置文本？

Question

这是我所做的工作。 问题是我无法在ul项目的中心放置文字。

 .fc-list-content { height: 32px; margin-top: 10px; } .fc-list-content:hover { background-color: orange; } .fc-list-a:hover { text-decoration: none; cursor: pointer; } 

 <ul class="list-group"> <a class="fc-list-a"> <li class="fc-list-content"><span class="content">ABC 1</span</li> </a> <a class="fc-list-a"> <li class="fc-list-content"><span class="content">ABC 2</span</li> </a> <a class="fc-list-a"> <li class="fc-list-content"><span class="content">ABC 3</span</li> </a> </ul> 

Answer 1

添加text-align:center; 到.fc-list-content

 .list-group { list-style-type:none; } .fc-list-content { height: 32px; margin-top: 10px; text-align:center; } .fc-list-content:hover { background-color: orange; } .fc-list-a:hover { text-decoration: none; cursor: pointer; } 

 <ul class="list-group"> <a class="fc-list-a"><li class="fc-list-content"><span class="content">ABC</span></li></a> <a class="fc-list-a"><li class="fc-list-content"><span class="content">ABC 2</span></li></a> <a class="fc-list-a"><li class="fc-list-content"><span class="content">ABC 3</span></li></a> </ul> 

Answer 2

首先，您的DOM是w3c：您想要一个链接列表，而不是某个链接中的一些链接。

之后，应该使用一个简单的文本中心。

 .fc-list-content { height: 32px; margin-top: 10px; text-align:center; } .fc-list-content:hover { background-color: orange; } .fc-list-a:hover { text-decoration: none; cursor: pointer; } 

 <ul class="list-group"> <li class="fc-list-content"><a class="fc-list-a"><span class="content">ABC</span></a></li> <li class="fc-list-content"><a class="fc-list-a"><span class="content">ABC</span></a> <li class="fc-list-content"><a class="fc-list-a"><span class="content">ABC</span></a> </ul> 

Answer 3

text-align:center

 .fc-list-content { height: 32px; margin-top: 10px; text-align:center; } .fc-list-content:hover { background-color: orange; } .fc-list-a:hover { text-decoration: none; cursor: pointer; } 

 <ul class="list-group"> <a class="fc-list-a"><li class="fc-list-content"><span class="content">ABC</span></li></a> <a class="fc-list-a"><li class="fc-list-content"><span class="content">ABC 2</span></li></a> <a class="fc-list-a"><li class="fc-list-content"><span class="content">ABC 3</span></li></a> </ul> 

Answer 4

您存在标记错误，不允许直接在<ul>下使用<a> 。

要使文本居中，只需添加text-align: center ul或li 。 我还更改了list-style-position: inside因此子弹也将居中。

 .list-group { list-style-position: inside; text-align: center; padding-left: 0; } .fc-list-content { height: 32px; margin-top: 10px; } .fc-list-content:hover { background-color: orange; } .fc-list-a:hover { text-decoration: none; cursor: pointer; } 

 <ul class="list-group"> <li class="fc-list-content"><a class="fc-list-a"><span class="content">ABC 1</span></a></li> <li class="fc-list-content"><a class="fc-list-a"><span class="content">ABC 2</span></a></li> <li class="fc-list-content"><a class="fc-list-a"><span class="content">ABC 3</span></a></li> </ul>