how to vertically align image, that is next to div with dynamic height

Question

like the title says I would like to put an image, that is next to div with dynamic height, into vertical center. Here is the code: http://jsfiddle.net/txuxn4c1/2/

<div class="element">
    <div class="logo_div">
        <img src="http://www.iconsdb.com/icons/download/orange/stackoverflow-4-32.jpg" width="30px" height="30px" />
    </div>
    <div class="text_div"> 
        text here<br />
        text here<br />
        text here<br />
        text here<br />
        text here<br />
    </div>
    <div style="clear:both"></div>
</div>

.element {
    border: 1px solid green;
}
.logo_div {
    float: left;
    border: 1px solid blue;
}
.text_div {
    float: left;
    width: 105px;
    border: 1px solid red;
}

I tried to set div style display to inline-block or table(-cell) and vertical-align: middle like it is suggested in some others thread answers, but it did not work.

Regards

Answer 1

One solution is to use display: table-cell with vertical-align: middle:

.element {
  border: 1px solid green;
}
.logo_div {
  display: table-cell;
  border: 1px solid blue;
  vertical-align: middle;
}
.text_div {
  display: table-cell;
  width: 105px;
  border: 1px solid red;
  vertical-align: middle;
}

<div class="element">
  <div class="logo_div">
    <img src="http://www.iconsdb.com/icons/download/orange/stackoverflow-4-32.jpg" width="30px" height="30px" />
  </div>
  <div class="text_div">text here
    <br />text here
    <br />text here
    <br />text here
    <br />text here
    <br />
  </div>
  <div style="clear:both"></div>
</div>
<div class="element">
  <div class="logo_div">
    <img src="http://www.iconsdb.com/icons/download/orange/stackoverflow-4-32.jpg" width="30px" height="30px" />
  </div>
  <div class="text_div">text here
    <br />text here
    <br />text here
    <br />text here
    <br />text here
    <br />
  </div>
  <div style="clear:both"></div>
</div>