Vertical align an div without a static height

Question

I'm creating a pagetitle with breadcrumbs. Now I want to vertical align te breadcrumbs. The div doesn't have a static height as it grows with the font-size and margin.

<div style="display: block; float: left; width: 100%;">
 <h1 style="float: left; text-align: left; margin: 0px;">
  <i class="fa fa-star-o"> </i> Information
 </h1>
 <div style="float: right; vertical-align: middle;">
  <a href="#" target="_self">Home</a> / Home / Home
 </div>
</div>

You can see a preview of my problem here:

Answer 1

Use line-height for right div:

<div style="display: block; float: left; width: 100%;">
 <h1 style="float: left; text-align: left; margin: 0px;">
  <i class="fa fa-star-o"> </i> Information
 </h1>
 <div style="float: right; vertical-align: middle;line-height:40px;">
  <a href="#" target="_self">Home</a> / Home / Home
 </div>
</div>

Answer 2

use instead float - display: inline-block;

.wrap{
    display: block; 
    float: left; 
    width: 100%;
    font-size: 0;
}
.wrap > div {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    width: 50%;
}
.wrap > div:nth-of-type(2){
    text-align: right;
}

<div class="wrap" style="">
 <div>
    <h1 style="text-align: left; margin: 0px;">
  <i class="fa fa-star-o"> </i> Information
 </h1>
    </div>
 <div>
  <a href="#" target="_self">Home</a> / Home / Home
 </div>
</div>

Answer 3

My favorite method is to use transformation on aligned element

<div style="display: block; float: left; width: 100%;position: relative;">
 <h1 style="float: left; text-align: left; margin: 0px;">
  <i class="fa fa-star-o"> </i> Information
 </h1>
 <div style="position: absolute; top: 50%;transform: translateY(-50%);right: 0;">
  <a href="#" target="_self">Home</a> / Home / Home
 </div>
</div>

Answer 4

I'd try to use display: table based vertical-alignment. Or, if you use modern browsers, flexbox is your god :)

<div style="display: table;">
  <div style="display: table-cell; width:100%; ">
    <h1 style="margin: 0px;">
  <i class="fa fa-star-o"> </i> Information
 </h1>
  </div>
  <div style="display: table-cell; white-space:nowrap; vertical-align: middle;">
    <a href="#" target="_self">Home</a> / Home / Home
  </div>
</div>