CSS: is there a way to vertically align the numbers/bullets before each list element?

Question

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

Answer 1

Hmm, this actually shouldn't be too difficult to achieve. Just make sure that all of your elements are vertically-aligned to the middle.

HTML:

    
 
Caption Text Here
    

CSS:

ol { 
    white-space: nowrap;
    padding: 0 40px; }
li img { 
    vertical-align: middle;
    display: inline-block; }
li p {
    white-space: normal;
    vertical-align: middle;
    display: inline-block; }

Preview: http://jsfiddle.net/Wexcode/uGuD8/

With multi-line text block: http://jsfiddle.net/Wexcode/uGuD8/1/

With auto-width multi-line text block: http://jsfiddle.net/Wexcode/uGuD8/11/