HeavenlyHost HeavenlyHost - 7 months ago 9
HTML Question

html button muliple line align

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

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>