Question

我想要一个2-col网格的图像和矩阵中不同的文字，无法弄清楚如何用LI＆amp; css或类似的。请帮助提供概念或良好的资源。

（网格将用于填充“假的”加强组合框。）

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

到目前为止

代码 - 没有正常运行的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>

Answer 1

以下是使用display: table-cell和display: table-row的解决方案。我稍微修改了你的标记，只显示相关和重要的部分，所以你可能需要为你的目的稍微调整一下。请注意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

如果没有这样的黑客攻击，CSS2中不可能实现垂直居中（也可以查看Chris Coyier's post），但如果您接受CSS3 Flexible Box Model，则help you可以the browser support。

Answer 2

这是一个在段落标签上使用内联块的解决方案，以及在图像和段落标签上使用vertical-align：center。

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>

如何将多行文字与左侧的图像垂直居中？

2 个答案: