Is there a way to horizontally align list item numbers/bullets with the item contents?

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 horizontally aligned along a horizontal center-line. The text block could be multiple lines. Here's a very rough illustration:

The closest I've achieved is the following, which aligns the list-number at the bottom (tested in Chrome 15, Firefox 8, IE9). See also JSFiddle mockup.

<style type="text/css">
    li div { display: inline-block }
    li div div { display: table-cell; vertical-align: middle }
</style>

<ol>
<li><div><div><img src=widget.png></div><div>Caption Text Here</div></div></li>
</ol>

Is there a way of doing this without supplying the numbering myself?

One more requirement: if the container-width is very small (e.g., when viewed on a mobile device), then the text-block must stay to the right of the image. There should be no text-wrapping around the image.

Thurible

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/

Revocation

Thank you very much for the reply, but this doesn't satisfy the multiline text-box requirement. – Thurible

Really only a minor change... still using vertical-align: middle; jsfiddle.net/Wexcode/uGuD8/1 – Revocation

But if your text-block is wider than will fit in the parent container, the entire text-block will be rendered below the image. I'd like the text to stay to the right of the image, regardless of the container width. – Thurible

What would you want to see happen if the text-block is larger than what fits on one line in the container? Scroll or just overflow past the container? Although to be honest, you would probably want to have text box be small enough to fit within the container. – Revocation

Ideally, the text should dynamically wrap based on the container width. A horizontal scroll should only be necessary if the container is too small to fit the longest single word. The original CSS above has this behavior (but it has other problems): jsfiddle.net/uGuD8/10 – Thurible

I'm pretty stumped. You'd need to float the image in order to achieve this effect, but you can't apply vertical-align on floated elements. The only thing I can really think of is if the image you're using is a fixed with, put it as a background-image with a background-position of 0 50% to center it, and just apply padding/margin to push out the text enough so that it doesn't overlap the image. – Revocation

@Thurible - gave it a bit more thought, I think I figured it out. Is this what you're looking for? jsfiddle.net/Wexcode/uGuD8/11 – Revocation

Thank you! This will probably suffice. However, I see that the wrap-point of the text-box is dependent on the hard-coded left padding of the ol element. See jsfiddle.net/k8Zhn/5 for an example of poor choice of padding. The amount of padding necessary appears to be dependent on the image width. Is there a way of forcing the text box to be contained in the ol container? – Thurible

Error in the above: I meant to say hard-coded right padding. – Thurible

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>

Bendicta