htmlボタンmuliple行の整列

Question

htmlとcss内の次のボタンの整列の問題について助けが必要です。

次fiddle

は

<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> 

がどのように垂直方向に自身の途中でその内容に合わせ、ボタンを得るのですか、問題を示して？

Answer 1

私はあなたがこれを必要だと思う：

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

あなたのHTMLは無効です。

button要素にdivを含めることはできません。

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

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

Answer 3

あなたはこれを試すことができます。 CSSフレックスボックス

.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>