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..

    Normalized CSS, option in JSFiddle, how to add it to document

    How to scale jumbotron bootstrap on larger monitors?

    how to get true css property names from CSSStyleDeclaration object?

    How to change ol bullets for clickable images

    Javascript/Jquery How to catch the use of a CSS class

    How can I insert new text with a hyperlink into a page in CSS?

    How to calculate total size of all css,js and html pages separately uing shell script?

    How to position these images in CSS?

    How to make full width image responsive? (no scale / stretch)

    How to create a table inner bevel in HTML/CSS?

    How to add a specific class to select2 drop element?

    Show Pinterest hover buttons only on images with specified class

    How to build a dashed line that has borders on both sides, using CSS

    How do I wrap a overflowed span in fixed div

    How do I change the function of a button when the window size changes?

    How can I modify footer color dynamically when I switch to another page in html and css

    How to change the background color of a div in HTML/CSS

    How do I center my search form within a div?

    How to apply format depending on absence of a CSS class?

    How to top align two cell divs within a table div when one cell div contains an absolute positioned div?

    Why are items showing up in my instead of [closed]

    How to hide label on radio checked using css

    How to remove the extra space between two span elements?

    How to make text all on the same line when adding div tags?

    How can I get images floated to the left of other definition list elements?

    How to select list item by its contents?

    how do i suppose to make the 4 box be responsive?

    how to create a tirangle and square with ccs only?

    How to format a table using CSS such that the table is within the screen and cells use as much possible and necessary width?

    How can I put element in the middle of vertical align?