html button muliple line align

Question

I need some help with the following button alignment issue within html and css.

The following fiddle shows the problem

<div>
  <button style="height:100px">
    <div style="display:table">
      <div style="display:table-cell; vertical-align:middle">
        bob
        <p>
          bill
        </p>
      </div>
    </div>
  </button>
  <button style="height:100px">
    <div style="display:table">
      <div style="display:table-cell; vertical-align:middle">
        bob
      </div>
    </div>
  </button>
</div>

How do I get the buttons vertically aligned with their contents in the middle of themselves ?

Answer 1

I think you need this:

button{
  height:100px;
  vertical-align: top;
}

.outer{
  display:table;
}

.inner{
  display:table-cell;
  vertical-align:middle;
}
.inner p {
  margin: 0;
}

<div>
  <button>
    <div class="outer">
      <div class="inner">
      bob
      <p>
        bill
      </p>
      </div>
    </div>
  </button>
  <button>
    <div class="outer">
      <div class="inner">
        bob
      </div>
    </div>
  </button>
</div>