Center a div element without ruining inline blocks-CodePudding

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"

enter image description here

<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;
   }

CodePudding user response：

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 >01</div>
  <div id="test"></div>
  <div >Projects</div>
</div>

CodePudding user response：

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 >01</div>
  <div id=test></div>
  <div >Projects</div>
</div>