html按钮多行对齐答案

【问题标题】：html button muliple line alignhtml按钮多行对齐
【发布时间】：2016-08-29 20:17:53
【问题描述】：

我需要一些帮助来解决 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>

如何让按钮在它们的中间垂直对齐它们的内容？

【问题讨论】：

标签： html css button vertical-alignment

【解决方案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>

【讨论】：

不要让 OP 检查你的答案，这被认为是粗鲁的。
按钮上的垂直对齐顶部解决了我的问题

【解决方案2】：

您的 HTML 无效。

button 元素不能包含 div。

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

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

【讨论】：

【解决方案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>

【讨论】：