Center a div element without ruining inline blocks [duplicate] - html

Question

This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed last year.
I have 3 small divs contained in a larger div all inline. I want to make the middle div vertically centered because it is a dash in between two words. When the user hovers over them, the line expands for an animation so it is important that the divs have relative position so the last word can get "pushed"
<div id = "con">
<div class = "a">01</div>
<div id = test></div> //This is the line to be centered
<div class = "a">Projects</div>
</div>
.a {
display: inline-block;
color: #AAAAAA;
}
html {
background: #222222;
}
#test {
width: 30px;
height: 1px;
display: inline-block;
background-color: #AAAAAA;
border-radius: 1px;
}
#con {
position: relative;
}

Answer 1

display: inline-flex, and align-items: center on the container solves your problem.
To better learn how to use flexbox display, check out flexbox froggy.
.a {
color: #AAAAAA;
}
html {
background: #222222;
}
#test {
width: 30px;
height: 1px;
background-color: #AAAAAA;
border-radius: 1px;
}
#con {
position: relative;
display: inline-flex;
align-items: center;
}
<div id="con">
<div class="a">01</div>
<div id="test"></div>
<div class="a">Projects</div>
</div>

Answer 2

Can use from margin-bottom & transition:
.a {
display: inline-block;
color: #AAAAAA;
}
html {
background: #222222;
}
#test {
transition: 0.5s linear;
margin-bottom: 5px;
width: 30px;
height: 1px;
display: inline-block;
background-color: #AAAAAA;
border-radius: 1px;
}
#con {
position: relative;
display: inline-block;
}
#con:hover #test {
width: 40px;
}
<div id="con">
<div class="a">01</div>
<div id=test></div>
<div class="a">Projects</div>
</div>