Can't Center Ordered List Title

Question

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>

do you want just the h3 centered or the h3 and number – Maxwelll Oct 31 '17 at 22:06 — Maxwelll, Oct 31 '17 at 22:06
Preferably just the text and not the number – jordanG Nov 01 '17 at 19:05 — jordanG, Nov 01 '17 at 19:05

score 2 · Accepted Answer · edited Nov 01 '17 at 05:41

2

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

edited Nov 01 '17 at 05:41

Minal Chauhan

6,025
8
21
41

answered Oct 31 '17 at 22:32

John

46
4

Okay this worked, but I'm just wondering if you can tell me why inline-block wouldn't work? The reason I'm asking is that with display: block it sets the h3 on its own line, so I had to raise it back up to match the number with a negative margin. – jordanG Nov 02 '17 at 18:06
This is because inline-block elements can have a width and height. So another way to center align is to keep your original (.list li h3) class and add a width 100% to it. As you originally had it, the width was that of the
.
– John Nov 03 '17 at 10:24
Take a look at this post for a detailed explanation: https://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block – John Nov 03 '17 at 10:29

Can't Center Ordered List Title

1 Answers1

.