[英]How to make text in the center of list item?
This is my work that I did. 这是我所做的工作。 The thing is I can't make the text in the center of the
ul
item. 问题是我无法在
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>
Add text-align:center;
添加
text-align:center;
to .fc-list-content
到
.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>
Firstly, you'r DOM it's w3c: you want a list of link, not some peace of link in some link. 首先,您的DOM是w3c:您想要一个链接列表,而不是某个链接中的一些链接。
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>
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>
You have markup errors, <a>
is not permitted directly under <ul>
. 您存在标记错误,不允许直接在
<ul>
下使用<a>
。
To center the text just add text-align: center
to ul
or li
. 要使文本居中,只需添加
text-align: center
ul
或li
。 I also changed list-style-position: inside
so the bullets will be centered too. 我还更改了
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.