Vertically align elements to match the adjacent elements middle line

Question

I have a button a div and a span adjacent to each other in a line

I need all of them to appear vertically aligned to the center like this

below is my code

button{
  height: 50px;
}

div{
  display: inline-block;
  height: 70px;
  border: 2px solid black;
  padding: 10px;
}
h1{
  display: inline-block;
}

<div></div>
<button>Button</button>
<span>Span</span>
<div>div</div>

Answer 1

I would suggest using flex for in this instance.

If you wrap a container around your elements, you can align the child elements to the center. See the snippet for an example.

button{
  height: 50px;
}

.container div{
  display: inline-block;
  height: 70px;
  border: 2px solid black;
  padding: 10px;
}
h1{
  display: inline-block;
}

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

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

I hope this helps.

Answer 2

If you introduce a parent element you can use flexbox:

.wrapper {
  display: flex;
  align-items: center; /* vertical center */
  justify-content: center; /* horizontal center */
  border: 1px solid red;
}

button {
  height: 50px;
}

.wrapper>div {
  display: inline-block;
  height: 70px;
  border: 2px solid black;
  padding: 10px;
}

h1 {
  display: inline-block;
}

<div class="wrapper">
  <div></div>
  <button>Button</button>
  <span>Span</span>
  <div>div</div>
</div>