How to align these buttons in a row? [duplicate]

Question

This question already has an answer here:

• Align inline-block DIVs to top of container element 4 answers
• Why is this inline-block element pushed downward? 8 answers

https://jsfiddle.net/2L9mznzu/

There are two empty text button, how to align them into a row?

.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

Use vertical-align: top property to your .button.

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box. Source: MDN

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

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

You can wrap them inside a container div and use display:flex; this way they will always be aligned to the vertical center of the container 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>