css - 在 div 中对齐图像 + 文本

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

使用 display:inline-block 格式化 h5，这样 vertical-align 就可以处理它，并给它一个宽度 - 比如这个:http://jsfiddle.net/Cds5q/

(h5 和 img 元素写的时候标签之间没有任何空格，否则你会得到它们之间一个空格字符的宽度，然后它们就不会' t 完全适合 div 元素。)