如何垂直对齐li标签

Question

How i can align to center my "li" tag?

    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>

I need something like this https://imgur.com/S3HVo0h

Answer 1

1. Put li in ul
2. Check what goals class has. Does it have 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

Try wrapping all of your list items in a UL element:

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

Generally speaking you should always use a list tag to start and close any lists that you are using.

Take a look at this for further clarification: https://www.w3schools.com/html/html_lists.asp

It also may also depend on your CSS too so double check that as well.

Answer 3

You could just nest another <ul> in between, like

<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

I'd like to point out that you can't put a li directly inside a div , because it is not allowed for some reason. You should put it in a ul instead to keep the validators happy. Like this:

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

We can then use a bit of flexbox to center this ul :

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

This should hopefully center it! Hooray!