Text not aligning vertically in a flex block

Question

.account-select-block {
  display: flex;
  width: 100%;
  height: 50px;
  line-height: 50px;
}

.account-select-icon {
  flex: 0;
  font-size: 20px;
}

.account-select-item {
  flex: 1;
  font-size: 14px;
  border: 1px solid #D8D8D8;
  background: #eee;
  cursor: pointer;
  transition: border 0.1s ease;
  text-align: left;
}

.account-select-remove {
  flex: 0;
  font-size: 20px;
  background-color: #ff5200;
  color: #fff;
}

<div class="account-select-block">
  <div class="account-select-icon">
    <i class="fa fa-user-circle" aria-hidden="true"></i>
  </div>
  <div class="account-select-item">
    <h3>Account Name</h3>
  </div>
  <div class="account-select-remove">
    <i class="fa fa-times" aria-hidden="true"></i>
  </div>
</div>

In the end icons are aligning vertically but text in the middle block doesn't

What am I doing wrong?

Fiddle: https://jsfiddle.net/7su954x3/

Answer 1

You need to remove the margin from the heading:

.account-select-block {
  display: flex;
  width: 100%;
  height: 50px;
  line-height: 50px;
}

.account-select-icon {
  flex: 0;
  font-size: 20px;
}

.account-select-item {
  flex: 1;
  font-size: 14px;
  border: 1px solid #D8D8D8;
  background: #eee;
  cursor: pointer;
  transition: border 0.1s ease;
  text-align: left;
}

.account-select-remove {
  flex: 0;
  font-size: 20px;
  background-color: #ff5200;
  color: #fff;
}

/* add this */
.account-select-item h3 {
  margin: 0;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="account-select-block">
  <div class="account-select-icon">
    <i class="fa fa-user-circle" aria-hidden="true"></i>
  </div>
  <div class="account-select-item">
    <h3>Account Name</h3>
  </div>
  <div class="account-select-remove">
    <i class="fa fa-times" aria-hidden="true"></i>
  </div>
</div>

Didn't realise you were setting the line height manually to vertically centre, if you don't want to do that then you would have to make each child flex too and apply align items to them:

.account-select-block {
  display: flex;
  width: 100%;
  height: 50px;
}

.account-select-icon {
  display:flex;
  align-items:center;
  font-size: 20px;
}

.account-select-item {
  display:flex;
  align-items:center;
  flex-grow:1;
  font-size: 14px;
  border: 1px solid #D8D8D8;
  background: #eee;
  cursor: pointer;
  transition: border 0.1s ease;
  text-align: left;
}

.account-select-remove {
  display:flex;
  align-items:center;
  font-size: 20px;
  background-color: #ff5200;
  color: #fff;
}

/* add this */
.account-select-item h3 {
  margin: 0;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="account-select-block">
  <div class="account-select-icon">
    <i class="fa fa-user-circle" aria-hidden="true"></i>
  </div>
  <div class="account-select-item">
    <h3>Account Name</h3>
  </div>
  <div class="account-select-remove">
    <i class="fa fa-times" aria-hidden="true"></i>
  </div>
</div>