html按鈕多行對齊

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的Flex-箱

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