I\'m attempting to create a numbered list where each li element contains an image and a text block. The list-number, image and text block should all be vertica
In this case, to achieve your goal you only need to add vertical-align: middle to the div wrapper inside the li.
All other code is correct.
This is because a marker (number or bullet) is bound to the element inside the li and it aligns with this element. You have the div wrapper in the li and to align marker you only need to align this wrapper. The elements inside this wrapper you can align as you need.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa nisl, facilisis vitae sollicitudin a, interdum nec augue. In ut ligula eget lectus vestibulum ullamcorper sit amet et nulla. Nam pellentesque augue quis erat imperdiet adipiscing. Vivamus vitae neque erat. Praesent a dui urna. Praesent fringilla orci sollicitudin lorem ornare quis laoreet elit placerat.