vertical-align and elements with dynamic content and height

Question

I've got a box with a fixed size and two elements in it, an image and some text. Both are variable in it's widths and heights, an I'm trying to vertically align the text within the remaining space under the image.

|-------- 184px --------|
   (text-align:center)

+-----------------------+   -     -
|       +-------+       |   |     |
|       |#######|       |   |     |
|       |#######|       |   |     | ?
|       |#######|       |   | 1   |
|       +-------+       |   | 6   |
| - - - - - - - - - - - |   | 8   -
|                       |   | p   |
|    Some vertically    |   | x   |
|   aligned text with   |   |     | *
|    variable length    |   |     |
|                       |   |     |
+-----------------------+   -     -

• line-height can't be used, as the text may have up to three lines
• vertically-align seems to only work on a fixed height
• JavaScript always returns height:0 for img (a pure CSS solution be preferred anyway)

The HTML:

<div class="box boxed js-box">
    <img src="/images/box-icon1.png">
    <span class="text short js-box-text">
        Title
    </span>
    <span class="text long js-box-text">
        Detailled description when hovered
    </span>
</div>

The style:

.box {
    background: #FFF;
    cursor: default;
    height: 168px;
    margin-top: 30px;
    padding: 4px;
    text-align: center;
    width: 184px;
}

.box img {
    border: 0;
    display: block;
    margin: auto;
    margin-bottom: 24px;
    position: relative;
    top: 16px;
    width: 76px;
}

.box .text {
    bottom: 4px;
    font-size: 12px;
    position: relative;
}

.box .text.short {
    font-size: 16px;
    top: 8px;
}

.box .text.long {
    display: none;
    font-size: 14px;
}

Answer 1

Simplest is to use display types table and table-cell/row on the parent and child elements:

Try to add:

.box {
    display: table;
}

.box .text {
    display: table-row;
    vertical-align: middle;
}

Now vertical-align: middle works on those! Note that in some cases you don't want to have a display table on the parent or the childs directly. You may just add a wrapper div with those attributes containing the stuff you'd like to layout vertically.

It may be necessary to put the texts in a table-cell displayed wrapper again which is within the table-row. I'm not sure about that atm.

Refer to following post: Vertical alignment of elements in a div

Answer 2

Create seperate containers for Your image and text and try using display: table; and display: table-row; on them.

jsFiddle (with updated JavaScript): http://jsfiddle.net/yoa3Lgd6/1/

HTML:

<div class="box boxed js-box">
    <div class="image_box">
        <img src="/images/box-icon1.png" />
    </div>
    <div class="text_box"> 
        <span class="text short js-box-text">
            Title<br />
        </span>
         <span class="text long js-box-text">
            Detailled description when hovered
        </span>
    </div>
</div>

JavaScript (with latest jQuery):

$(function() {
    $('div.text_box').hover(function() {
        $(this).find('.short').hide();
        $(this).find('.long').show();
    }, function() {
        $(this).find('.short').show();
        $(this).find('.long').hide();
    });
});

changes done to CSS:

.box {
    display: table;
}
.box > div {
    display: table-row;
    vertical-align: middle;
}

Answer 3

I think the best way (without JS) is to have a maximum height for image (and maybe a wrapper around it) and user display:table and display:table-cell for text and it's wrapper. see the example below:

.box {
    background: #FFF;
    cursor: default;
    height: 168px;
    margin-top: 30px;
    padding: 4px;
    width: 184px;
}

.box .img-wrap {
    height:100px;
    line-height:100px;
    text-align:center;
    background:#eee;
}

.box img {
    border: 0;
    width: 76px;
    max-height:100px;
    height:auto;
    vertical-align:middle;
}

.box .text {
    font-size: 12px;
}

.box .text-wrap {
  height:68px;
  display:table;
  background:#bbb;
  width:100%;
}

.box .text {
  display:table-cell;
  width:100%;
  vertical-align:middle;
  text-align:center;
}

.box .text.short {
  font-size: 16px;
}

.box .text.long {
  display: none;
  font-size: 14px;
}

<div class="box boxed js-box">
    <div class="img-wrap"><img src="/images/box-icon1.png"></div>
    <div class="text-wrap">
      <div class="text short js-box-text">
          Title
      </div>
      <div class="text long js-box-text">
          Detailled description when hovered
      </div>
    </div>
</div>