Text not aligning vertically in a flex block - html

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>

Answer 2

In your question you ask how to align in flexbox. However in your code .account-select-item is not a flexbox.
Instead you seem to be using an old styling 'hack' using line-height. This will fall apart if you ever decide to change .account-select-block's height or line-height.
.account-select-block {
display: flex;
width: 100%;
height: 50px;
/* line-height: 50px; */
}
.account-select-icon {
flex: 0;
font-size: 20px;
}
.account-select-item {
display: flex; /* NEW */
flex: 1;
align-items: center; /* NEW */
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>

Answer 3

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