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

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

将text-align:center;添加到.fc-list-content

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

首先，你是DOM的w3c：你想要一个链接列表，而不是某些链接中某些链接的和平。

之后，一个简单的文本中心应该这样做。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

text-align:center

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

您有标记错误，<a>下不允许<ul>。

要将文字居中，只需将text-align: center添加到ul或li即可。我也更改了list-style-position: inside，因此子弹也会居中。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;