How to vertically align list to list using flexbox?

Question

I needed to create a list with a custom index list that is vertically centered for the contents of the list items.

Since I use flex already, I thought it was easiest to give a list item a display:flex; and stylize it. This works, but as soon as the list-item contains other items, it gets messed up . As you can see in the example below .

What is the best way to vertically center a list index?

- Updated example -

 ol { list-style: none; padding: 0; width: 200px; } ol > li { display: flex; margin-top: 20px; align-items: center; } ol > li:before { color: red; content: attr(data-count)' ›'; flex display: block; flex-shrink: 0; text-align: right; min-width: 24px; padding-right: 5px; } 

 <ol> <li data-count="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> <li data-count="10">Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</li> <li data-count="999">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> </ol> 

Answer 1

The solution might be to use display:table instead of flex in this particular case.

 ol { list-style: none; padding: 0; width: 200px; display:table; border-spacing:0 20px; } ol > li { display:table-row; vertical-align:middle; } ol > li:before { color: red; content: attr(data-count)' ›'; display:table-cell; vertical-align:middle; text-align: right; white-space: nowrap; padding-right: 10px; } 

 <ol> <li data-count="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> <li data-count="10">Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</li> <li data-count="999 99">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> </ol> 

Answer 2

I think the best option is to wrap all the elements inside li in one other element and fix the problem.

 ul { list-style: none; padding: 0; width: 200px; } ul > li { display: flex; margin-top: 20px; align-items: center; } ul > li:before { color: red; content: '›'; flex display: block; flex-shrink: 0; text-align: center; width: 30px; } 

 <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> <li> <p>Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</p> </li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> </ul> 

Answer 3

Here, the absolute positioning method is used to vertically center the arrows.

 ol { list-style: none; padding: 0; width: 200px; } ol > li { margin: 20px 0 0; padding-left: 36px; position: relative; } ol > li:before { color: red; content: attr(data-count)' ›'; font-size: 14px; line-height: 1; position: absolute; left: 0; top: 50%; /* vertically center */ margin-top: -7px; /* and shift up based on 16px height */ } 

 <ol> <li data-count="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> <li data-count="10">Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</li> <li data-count="999">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> </ol>