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> 

Answer 2

Your HTML is invalid.

button elements cannot contain divs.

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

 <div> <button> <span>bob</br> bill</span> </button> <button> <span>bob</span> </button> </div> 

Answer 3

You can try this. CSS Flex-box

 .add_class{ display: -webkit-flex; display: flex; } button{ height:100px; margin:5px; } 

 <div class="add_class"> <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>