How to make text in the center of list item?

Question

This is my work that I did. The thing is I can't make the text in the center of the ul item.

 .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

Add text-align:center; to .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

Firstly, you'r DOM it's w3c: you want a list of link, not some peace of link in some link.

After that, a simple text-center should did it.

 .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

You have markup errors, <a> is not permitted directly under <ul> .

To center the text just add text-align: center to ul or li . I also changed list-style-position: inside so the bullets will be centered too.

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