How to align these buttons in a row?

Question

https://jsfiddle.net/2L9mznzu/

There are two empty text buttons, how to align them to a string?

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

Run codeHide result

Answer 1

Use the property vertical-align: topfor yours .button.

A vertical-aligned CSS property indicates the vertical alignment of an inline or table-cell. Source: MDN

See the demo below:

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

Run codeHide result

Answer 2

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

Hide result