リストアイテムの中央にテキストを作成するには？

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

まず、you'rはそれは、W3CのDOM .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

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