html button multiple line align

Question

Ich brauche Hilfe mit dem folgenden Button Alignment-Problem innerhalb von HTML und CSS.

Die folgenden fiddle zeigt das 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> 

Wie kann ich die Tasten vertikal ausgerichtet mit ihren Inhalten in der Mitte selbst bekommen?

Answer 1

Ich glaube, Sie dies benötigen:

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

Ihre HTML ungültig ist.

button Elemente dürfen keine Divs enthalten.

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

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

Answer 3

Sie können dies versuchen. 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>