Centre an Icon within a div - Bootstrap 3 & Font Awesome - html

Question

I have a simple bootstrap grid with a row displaying some text in one column and a stacked font-awesome icon set in another column. The issue I'm having is the icon-set is not vertically aligned in the middle of the div, as the text is. As you can see the icon is more aligned to the top of the div. Is there a way to center align this?
I've created a fiddle here and re-posted the code below:
html:
<div class="container-fluid">
<div class="row posted-content">
<div class="col-md-10">
<h4 class="text-primary pull-left">Hey, this is some text</h4>
</div>
<div class="col-md-2 comment-count pull-right">
<a class="fa-stack comment-action">
<i class="fa fa-comment-o fa-fw fa-stack-2x"></i>
<i class="fa fa-stack-1x">5</i>
</a>
</div>
</div>
</div>
css:
.posted-content {
border-radius: 4px;
border-color: #e7e7e7;
border: 1px solid rgba(0, 0, 0, 0.1);
max-width: 1140px;
background-color: #f8f8f8;
margin-bottom: 0px;
vertical-align: middle;
}
I've tried playing with vertical-align but to no avail. Any ideas appreciated.

Answer 1

Try this
<div class="container-fluid">
<div class="row posted-content centered-vertically">
<div class="col-md-10">
<h4 class="text-primary pull-left">Hey, this is some text ghssd fjkflsdj sdfkkl;asdk</h4>
</div>
<div class="col-md-2 comment-count pull-right">
<a class="fa-stack comment-action">
<i class="fa fa-comment-o fa-fw fa-stack-2x"></i>
<i class="fa fa-stack-1x">5</i>
</a>
</div>
</div>
</div>
CSS
.container-fluid .centered-vertically{
display:flex;
align-items:center;
}
Fiddle here

Answer 2

Here is a little Workaround with flexbox:
.posted-content {
border-radius: 4px;
border-color: #e7e7e7;
border: 1px solid rgba(0, 0, 0, 0.1);
max-width: 1140px;
background-color: #f8f8f8;
margin-bottom: 0px;
display:flex;
align-items: center;
justify-content: space-between;
}
.posted-content:before,.posted-content:after{
display:none;
}
.comment-action {
color: #79858A;
}
.comment-count>a {
text-decoration: none;
}
.comment-count>a:hover {
color: #d9534f !important;
}
JSFiddle