CODEWITHSUNDEEP
htmlcssreactjs
Freedom Essence
Freedom Essence

Reputation: 100

How to align a li tag vertically

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://i.sstatic.net/9Y2VX.jpg

Upvotes: 1

Views: 122

Answers (4)

corn on the cob
corn on the cob

Reputation: 2282

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!

Upvotes: 0

Adithya
Adithya

Reputation: 1728

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>

Upvotes: 0

Mamdlv
Mamdlv

Reputation: 540

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.

Upvotes: 1

Anubhav
Anubhav

Reputation: 171

  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>

Upvotes: 1

Related Questions