1

我想要一个 2 列的图像网格和矩阵中的不同文本，不知道如何使用 LI & 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>
4

2 回答 2

2

这是使用display: table-celland的解决方案display: table-row。我稍微修改了您的标记以仅显示相关和重要的部分，因此您可能需要根据您的目的对其进行一些调整。请注意，IE 7 和更低版本不支持这些属性。

.list2 li {
    display: table-row;
}

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

jsFiddle 演示

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.

于 2012-05-16T09:34:05.450 回答
1

这是在段落标签上使用 inline-block 并在图像和段落标签上使用 vertical-align:center 的解决方案。

在这里看到它：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>​
于 2012-05-16T09:29:39.123 回答