Question

我一直遇到这些盒子的问题。问题是我需要使文本始终在框+图像的中间对齐，无论它有多少行。看看下面的例子，非常感谢：

HTML（我正在使用960网格）

    <div class="grid_4 prod-box-small alpha">
      <h5>Shampoos</h5>
      <div class="prod-img-box-small"><img src="images/product_small_1.jpg" alt="" /></div>
    </div>

CSS

.prod-box-small {
    border:1px solid #e4e4e4;
    min-height:115px;
    padding-right:12px;
    padding-left:20px;
    margin-bottom:20px
}
.prod-box-small h5 {
    color:#820c8e;
    float:left;
    font-weight:600;
    max-width:100px;
    padding-top:42px;
    padding-bottom:22px
}
.prod-img-box-small {
    width:100%;
    display: block;
    padding:0;
    max-height:105px;
    margin-right: 0;
    text-align: right;
    line-height: 115px;
}
.prod-img-box-small img {
    max-width:100%;
    max-height:100%;
    vertical-align: middle
}

Answer 1

使用h5格式化display:inline-block，因此vertical-align可以对其进行处理，并给它一个宽度 - 如下所示：http://jsfiddle.net/Cds5q/

（h5和img元素在这里的标记之间没有任何空格，否则你将获得它们之间的空格字符的宽度，然后它们将不适合{{ 1}}元素恰好。）

Answer 2

精简到代码的重要部分：http://jsfiddle.net/aETC4/

您可以使用display: table。使用vertical-align: middle，您的标题将被安排在虚拟单元格的中心

Answer 3

我们使用margin-left的最简单方式：以百分比表示保证金权利。您可以通过调试工具检查百分比值。

对齐div中的图像+文本

3 个答案: