如何将这些按钮对齐？

Question

https://jsfiddle.net/2L9mznzu/

有两个空文本按钮，如何将它们对齐成一行？

＆＃13;

＆＃13;

.button {
  display: inline-block;
  width: 80px;
  height: 30px;
  line-height: 30px;
  background: gray;
  margin: 0 4px;
  text-align: center;
}

＆＃13;

<div class="button">
</div>
<div class="button">Button
</div>
<div class="button">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将=IF(A1=" ","",A1) 属性用于vertical-align: top。

  

vertical-align CSS属性指定了一个垂直对齐方式   内联或表格框。   资料来源：MDN

见下面的演示：

.button

.button {
  display: inline-block;
  vertical-align: top;
  width: 80px;
  height: 30px;
  line-height: 30px;
  background: gray;
  margin: 0 4px;
  text-align: center;
}

Answer 2

只需添加vertical-align：middle;

.button {
display: inline-block;
width: 80px;
height: 30px;
line-height: 30px;
background: gray;
margin: 0 4px;
text-align: center;
vertical-align: middle;

}

Answer 3

您可以将它们包装在容器div中并使用display:flex;，这样它们将始终与容器div的垂直中心对齐。

＆＃13;

＆＃13;

.button {
  display: inline-block;
  width: 80px;
  height: 30px;
  line-height: 30px;
  background: gray;
  margin: 0 4px;
  text-align: center;
}

.container{
  display:flex;
  flex-direction:row;
  align-items:center;
}

＆＃13;

<div class="container"><div class="button">
</div>
<div class="button">Button
</div>
<div class="button">
</div>
</div>

＆＃13;

＆＃13;

＆＃13;