Как сделать текст в центре элемента списка?

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

У вас есть разметки ошибки, <a> не разрешается непосредственно под <ul>.

Чтобы разместить текст, просто добавьте 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>

Answer 2

Добавить text-align:center; в .fc-list-content

.list-group { 
 
    list-style-type:none; 
 
} 
 
.fc-list-content { 
 
\t height: 32px; 
 
\t 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 3

Во-первых, you'r DOM это w3c: Вы хотите получить список ссылку, а не некоторый мир ссылку в какой-либо ссылке.

После этого простой текстовый центр должен был это сделать.

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

<ul class="list-group"> 
 

 
\t \t \t \t <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> 
 
\t \t \t </ul>

Answer 4

text-align:center 

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

<ul class="list-group"> 
 

 
\t \t \t \t <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> 
 
\t \t \t </ul>