Vertically align elements to match the adjacent elements middle line [duplicate] - html

Question

This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
How can I vertically align elements in a div?
(28 answers)
How to align a <div> to the middle (horizontally/width) of the page [duplicate]
(27 answers)
How to vertical align an inline-block in a line of text?
(2 answers)
Closed 4 years ago.
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>