html - 如何在列表项的中心制作文本？

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>