Wie mache ich Text in der Mitte des Listeneintrags?

Question

Das ist meine Arbeit, die ich gemacht habe. Die Sache ist, dass ich den Text in der Mitte des Artikels ul nicht machen kann.

.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

Sie haben Auszeichnungsfehler wird <a> nicht direkt unter <ul> gestattet.

Um den Text zu zentrieren, fügen Sie einfach text-align: center zu ul oder li hinzu. Ich änderte auch list-style-position: inside, also werden die Kugeln auch zentriert.

.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

hinzufügen text-align:center; zu .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

Erstens you'r DOM es ist w3c: Sie erhalten eine Liste Link wollen, nicht irgendein Frieden Link in irgendeinem Link.

Danach sollte ein einfaches Text-Center es getan haben.

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