html按钮多行对齐

Question

我需要以下有关HTML和CSS中的按钮对齐问题的帮助。

以下小提琴显示了问题

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