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:

<ol>
    <li><img src="widget.png" alt /> <p>Caption Text Here</p></li>
</ol>    

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/

Answer 2

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.

<style type="text/css">
    li {
        width: 350px;
    }
    li img {
        margin: 0 12px;
    }
    li div {
        display: inline-block;
        vertical-align: middle;  <!-- I added this line -->
    }
    li div div {
        display: table-cell;
        vertical-align: middle;
    }
</style>

<ol>
    <li>
        <div>
            <div>
                <img src="https://www.gravatar.com/avatar/eaeeab2ea028801c9c4091a10aa2f567?s=64&d=identicon&r=PG" alt />
            </div>
            <div>
                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.
            </div>
        </div>
    </li>
</ol>