如何将这些按钮对齐？ [重复]

Question

这个问题在这里已有答案：

• 将内联块DIV与容器元素 4答案的 顶部对齐
• 为什么这个内联块元素被推下？ 8个答案

https://jsfiddle.net/2L9mznzu/

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

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

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

Answer 1

将vertical-align: top属性用于.button 。

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

见下面的演示：

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

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

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的垂直中心对齐。

 .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; } 

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