Travis Travis - 2 months ago 6
CSS Question

Troubles with my vertical alignment

I've followed several tutorials or "tips" on how to accomplish this, yet it seems when I do one thing, it breaks something else which is just pushing me further away from my goal.

Currently its center aligned as I want, now to center align it vertically.

'line-height' ends up messing with my borders which isn't helping either. I could of sworn I have dealt with this in the past, but I can't find any old sources of mine that had this solved.

Code:



.parent {
width: 100%;
height: 76px;
border: 1px solid black;
border-radius: 15px;
display: block;
text-align: center;
}
#space {
width: 5px;
display: inline-block;
}
.child {
width: 75px;
display: inline-block;
vertical-align: middle;
border: 1px solid #8CAAD2;
border-radius: 10px;
}

<div class="parent">
<span class="child">Call Us</span>
<div id="space"></div>
<span class="child">Call Us</span>
</div>





FIDDLE

Answer

You can use flexbox with align-items:center; and justify-content:center on .parent.

.parent{
  width:100%;
  height:76px;
  border:1px solid black;
  border-radius:15px;
  display: -ms-flexbox;
  display:flexbox;
  display:flex;
  text-align:center;
  align-items:center;
  justify-content:center;
}
#space{
  width:5px;
  display:inline-block;
}
.child{
  width:75px;
  display:inline-block;
  vertical-align:middle;
  border:1px solid #8CAAD2;
  border-radius:10px;
}
<div class="parent">
<span class="child">Call Us</span>
<div id="space"></div>
<span class="child">Call Us</span>
</div>