Search code examples
cssalignmentvertical-alignment

Align images + text inside div

I've been having a problem with these boxes. The thing is that I need to make the text align always in the middle of the box + image no matter how many lines it has. Have a look at the example bellow, many thanks:

HTML (I'm using 960 grid)

    <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
}
Solution

  • Format the h5 using display:inline-block, so vertical-align can work on it, and give it a width - like this: http://jsfiddle.net/Cds5q/

    (h5 and img elements are written without any whitespace between the tags here, otherwise you will get the width of a space character between them, and then they won’t fit into the div element exactly.)