如何垂直对齐li标签

Question

我如何对齐以将我的“li”标签居中？

    const succes = <a href="#" className='succes'>✓</a>
    const fail = <a href="#" className="fail"></a>
   

   <div className="goals">
      <li>Collect 5 thousand subscribers</li>
      <li>Learn ReactJS </li>
      <li>{succes} Move to apartment</li>
      <li>Start speaking english fluently</li>
  </div>

我需要这样的东西https://imgur.com/S3HVo0h

Answer 1

1. 将li放入ul
2. 检查类有什么goals 。 它有text-align:center吗？

 .centered { text-align: center; }

 <ul> <li>First</li> <li>second</li> <li>Third</li> </ul> <div class="centered"> <li>First</li> <li>second</li> <li>Third</li> </div> <!-- UL vs DIV --> <ul class="centered"> <li>First</li> <li>second</li> <li>Third</li> </ul>

Answer 2

尝试将所有列表项包装在 UL 元素中：

 <div className="goals">
      <ul>
      <li>Collect 5 thousand subscribers</li>
      <li>Learn ReactJS </li>
      <li>{succes} Move to apartment</li>
      <li>Start speaking english fluently</li>
      </ul>
  </div>

一般来说，您应该始终使用列表标签来启动和关闭您正在使用的任何列表。

看看这个进一步澄清： https : //www.w3schools.com/html/html_lists.asp

它也可能也取决于你的 CSS，所以也要仔细检查一下。

Answer 3

你可以在中间再嵌套一个<ul> ，比如

<div className="goals">
 <ul>
  <li>Collect 5 thousand subscribers</li>
  <li style="list-style: none;">
    <ul>
      <li>Learn ReactJS </li>
      <li>{succes} Move to apartment</li>
    </ul>
  </li>
  <li>Start speaking english fluently</li>
 </ul>
</div>

Answer 4

我想指出的是，您不能将li直接放在div ，因为出于某种原因不允许这样做。 你应该把它放在一个ul而不是让验证器高兴。 像这样：

<div className="goals"> 
    <ul>
        <li>Collect 5 thousand subscribers</li> 
        <li>Learn ReactJS </li> 
        <li>{succes} Move to apartment</li> 
        <li>Start speaking english fluently</li> 
    </ul>
</div>

然后我们可以使用一些 flexbox 来使这个ul居中：

div {
    display: flex;
    justify-content: center;
}

这应该是中心的！ 万岁！