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>