如何在列表项的中心创建文本？

这是我做过的工作。事情是我不能让文字在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>

来源

2017-02-22 Alen

你必须标记错误，<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>

来源

2017-02-22 16:19:07 Stickers

添加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>

来源

2017-02-22 16:17:39 APAD1

首先，找你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>

来源

2017-02-22 16:18:40 Cawet

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>

来源

2017-02-22 16:18:51

如何在列表项的中心创建文本？

回答

相关问题