div内的图标垂直对齐

Question

这里的JSFiddle演示:http:
//jsfiddle.net/5q0nzrw8/

CSS:

.post-nav {margin: 20px 0;}

.post-nav-prev, .post-nav-next {float: left; padding: 10px; border: 1px solid #aaa; background: #fff; width: 298px;}
.post-nav-prev {text-align: left;}
.post-nav-next {text-align: right; margin-left: 20px;}

.post-nav-prev a, .post-nav-next a {font-family: Arial; font-weight: 500; font-size: 20px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; text-decoration: none;}
.post-nav-prev a:hover, .post-nav-next a:hover {color: #000;}

.post-nav-prev-icon, .post-nav-next-icon {}
.post-nav-prev-icon:before, .post-nav-next-icon:before {font-family: Arial; font-size: 28px; color: #aaa;}
.post-nav-prev-icon:before {float: left; content: '\00AB'; padding-right: 10px;}
.post-nav-next-icon:before {float: right; content: '\00BB'; padding-left: 10px;}

HTML:

<div class="post-nav">
    <div class="post-nav-prev">
        <span class="post-nav-prev-icon"></span>
        <a href="#" rel="prev">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</a>
    </div>
    <div class="post-nav-next">
        <span class="post-nav-next-icon"></span>
        <a href="http://mydivision.net/2014/11/the-division-user-interface-styleguide-geleakt/" rel="next">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</a>
    </div>
</div>

我想要实现的是"»"和"«"是垂直居中的.
结果应如下所示:

不幸的是,我似乎太愚蠢了,所以我希望有人可以帮助我.:)

Answer 1

使用display: table-cell;&vertical-align: middle;

添加以下css

.post-nav-prev-icon,.post-nav-next-icon{
 display: table-cell;
 vertical-align: middle;}

.post-nav-prev a,.post-nav-next a{display: table-cell;}

并改变 .post-nav-next如下的HTML

<div class="post-nav-next">
<a href="http://mydivision.net/2014/11/the-division-user-interface-styleguide-geleakt/" rel="next">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</a>

<span class="post-nav-next-icon"></span>
</div>

工作演示 http://jsfiddle.net/5q0nzrw8/2/