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>