CODEWITHSUNDEEP
csslayout
Teson
Teson

Reputation: 6736

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

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>

Upvotes: 1

Views: 1874

Answers (2)

kapa
kapa

Reputation: 78731

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.

Upvotes: 2

Fisch
Fisch

Reputation: 3815

here is a solution using inline-block on the paragraph tags, and vertical-align:center on the image and paragraph tags.

see it here: http://jsfiddle.net/uHzZR/

<div class="list2" style="width:400px;">
  <ul>
    <li>
      <div style="float:left;border:1px solid #000;width:400px;">
        <img style="vertical-align: middle;" src="imgcache/91427.jpg" height="100">
        <p style="margin-left:20px;width: 288px;vertical-align: middle;display: inline-block;">I want to be vert. safjsdfl asdf asf saf sdfsf sdfs fsffsd fdfss centered.</p>
      </div>
      <div style="clear:both;"></div>
    </li>
    <li>
     <div style="float:left;border:1px solid #000;width:400px;">
       <img style="vertical-align: middle;" src="52352.jpg" height="60">
       <p style="margin-left:20px;vertical-align: middle;width: 288px;display: inline-block;">I want to be vert. centered.</p>
     </div>
   </li>
 </ul>
</div>​

Upvotes: 1

Related Questions