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

我认为你需要这个：

＆＃13;

＆＃13;

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

.outer{
  display:table;
}

.inner{
  display:table-cell;
  vertical-align:middle;
}
.inner p {
  margin: 0;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

.add_class{
  display: -webkit-flex;
  display: flex;
}
button{
  height:100px;
  margin:5px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;