KnowledgeHub
Questions
Tags
Users
Search
Alex Rivera
|
Logout
Edit Question
Title
Body
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.
Tags (comma-separated)
Save Edits
Cancel