CODEWITHSUNDEEP
htmlcsshtml-listscentering
jordanG
jordanG

Reputation: 59

Can't Center Ordered List Title

I have an ordered list with an H3 and then a paragraph.

I can't figure out how to center the heading.

.list {    
  list-style: decimal; 
  list-style-position: inside; 
  margin-left: 0px; 
  display: inline-block;
}

.list li h3 {    
  display: inline-block;
  margin: 0 auto;
  text-align: center;   
}
<ol class="list" reversed="reversed">
  <li>
    <h3>Fourth Prime</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus feugiat at metus ut ultricies. Aliquam lacinia libero sit amet ex accumsan, sit amet imperdiet sapien vehicula. In hac habitasse platea.</p>

  </li>
</ol>

Upvotes: 1

Views: 409

Answers (1)

John
John

Reputation: 46

If you want the H3 centered look at the display css option, currently display: inline-block is not allowing the H3 tag to be centered.

.list li h3 {
   display: inline-block; // block or list-item
   margin: 0 auto;
   text-align: center;
}

Upvotes: 2

Related Questions