How to vertically center multiline text with an image on its left?


Tags: css,layout

Problem :

I want a 2-col grid of images and varying text in a matrix, can't figure out how to do it with LI & css or similar. Please help out with concept or good resource.

(the grid will be used to populate a "fake" enhanched combobox.)

|  o o   |                                     |
|   ¨    | This text verically centered        |
|  ---   |  
------------------------------------------------
|  o o   |                                     |
|   ¨    | This text verically centered        |
|  ---   |                                     |

Code so far - no functioning valign:

<div class="list2" style="width:400px;">
  <ul>
    <li>
      <div style="float:left;border:1px solid #000;width:400px;">
        <img style="float:left;" src="imgcache/91427.jpg" height="60"/>
        <p style="margin-left:20px;float:left;">I want to be vert. centered.</p>
      </div>
      <div style="clear:both;"></div>
    </li>
    <li>
     <div style="float:left;border:1px solid #000;width:400px;">
       <img style="float:left;" src="52352.jpg" height="60"/>
       <p style="margin-left:20px;float:left;">I want to be vert. centered.</p>
     </div>
   </li>
 </ul>
</div>


Solution :

Here is a solution using display: table-cell and display: table-row. I revised your markup a bit to only show the relevant and important parts, so you might have to tweak it a bit for your purposes. Please note that IE 7 and lower do not support these properties.

.list2 li {
    display: table-row;
}

.list2 img { 
    display: table-cell;
}
.list2 p { 
    display: table-cell;
    padding-left: 20px; 
    vertical-align: middle;
}

jsFiddle Demo

Vertical centering is not really possible in CSS2 without hacks like this (check out Chris Coyier's post also), but the CSS3 Flexible Box Model could help you if you accept the browser support.


    CSS Howto..

    I want to apply an existing CSS style to all labels on a page. How?

    how to position two transparent images to overlap opposite corners of a container div

    “Best fit” font size - how do I measure a sentence width?

    How to reference this line in CSS, HTML

    HTML & CSS: How to put quotation mark and text in same height?

    How can I animate my div to go from top to bottom whithout interfering with the content inside?

    How do you set the filepath for css in hiccup with Clojure using the html5 tag?

    How to double an image size in HTML using only CSS?

    How to completely remove borders from HTML table

    How can I align an image to the center in a Bootstrap column?

    How can I resize a background-image to fit my element (without set width) in CSS 2?

    How can I wrap content around a UL CSS Menu so content is seamless?

    Displaying XML using CSS: How to handle  ?

    How to have the class=“selected” depending on what the current page/url is

    How to place a div at top center position of a page using css…?

    CSS Flex Box — flex-wrap:wrap; How to style a specific line?

    How to transform Menu icon to Arrow icon? [closed]

    How to have proper spacing between items in the navbar regardless of word size?

    HTML/CSS current active menu does not show active

    How to make CSS compatible with all browsers?

    How to prevent an empty img element from shrinkage?

    how to show images with it's original smoothness in IE

    How can I avoid a “Flash of Unstyled Content” using fixed-width cells in CSS Tables?

    How can I make this little javascript work with 2 textarea elements without killing the CSS?

    How to make list of all classes in the page using jQuery?

    How to order properties in a declaration block? [closed]

    How to overwrite css animation

    How can I add block colour to the CSS of my list?

    How to get CSS pseudo-elements to look the same cross browser?

    Understanding how menus work in html5 and css3