4lackof 4lackof - 4 months ago 15
CSS Question

CSS - Vertical align span in div

I know this question has been asked a lot and I have done considerable research on this point (here on Stack Overflow and elsewhere via Google, etc.) but I cannot find an answer which handles the point I am running into.

I have a dropdown with the following code:

HTML

<div class="dropdown">
<div class="box">T</div>
<span class="phone-number">(999) 999-9999</span>
<span class="email">temp@temp.com</span>
</div>


CSS

.dropdown{
max-height: 256px;
margin: 0px 4px;
padding: 16px;
overflow: hidden;
background-color: grey;
}
.dropdown .box{
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
}
.dropdown span{
display: inline-block;
color: white;
}


I have also made a jsfiddle with the above code here.

I am trying to figure out how to get the two
<span>
s to be vertically centered in the dropdown.

Answer

Flexbox can do that

.dropdown {
  max-height: 256px;
  margin: 0px 4px;
  padding: 16px;
  overflow: hidden;
  background-color: grey;
  display: flex;
  align-items: center;
}
.dropdown .box {
  width: 32px;
  height: 32px;
  padding: 5px 0px;
  margin: 0px 4px;
  display: inline-block;
  background-color: white;
  overflow: hidden;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
}
.dropdown span {
  display: inline-block;
  color: white;
}
<div class="dropdown">
  <div class="box">T</div>
  <span class="phone-number">(999) 999-9999</span> 
  <span class="email">temp@temp.com</span>
</div>