Html div内图标的垂直对齐

这里是JSFIDLE演示：

CSS:

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>

我想要实现的是“»”和“«”垂直居中。
结果如下所示：

不幸的是，我似乎太蠢了，无法完成这件事，所以我希望这里有人能帮助我。：）

//使用float:left在div的左侧移动

.post-nav-prev {
    text-align: left;
    float: left
}

.post-nav-next {
    text-align: right;
    margin-left: 20px;
    float: right
}

.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;
}

//使用float:right在div右侧移动

.post-nav-prev {
    text-align: left;
    float: left
}

.post-nav-next {
    text-align: right;
    margin-left: 20px;
    float: right
}

.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;
}

---

使用

显示：表格单元格&
垂直对齐：中间

添加以下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>



工作演示
尝试添加float:left；和浮动：右键指向上一个/下一个，然后为其父项设置宽度：

.post nav{边距：20px 0；宽度：700px；}

.post nav prev、.post nav next{浮点：左；填充：10px；边框：1px实心#aaa；背景：#fff；宽度：298px；}
.post nav prev{text align:left；float:left；}
.post nav next{文本对齐：右；边距左：20px；浮点：右；}

.post nav prev a、.post nav next a{字体系列：Arial；字体重量：500；字体大小：20px；-webkit转换：全部0.4s易用性；转换：全部0.4s易用性；文本装饰：无；}
.post nav prev a:hover.post nav next a:hover{color:#000；}

我将完全删除图标元素，并直接应用于它们的父元素（在创建
位置：relative
之后）


/*当前元素框大小的最小重置*/
邮政导航*{
-webkit框大小：边框框；
-moz框大小：边框框；
-ms框尺寸：边框框；
-o型盒尺寸：边框盒；
框大小：边框框；
}
.post nav{页边距：20px 0；}
.post nav prev、.post nav next{浮点：左；填充：10px；边框：1px实心#aaa；背景：#fff；宽度：298px；位置：相对；}
.post nav prev{text align:left；padding left:30px；}
.post nav next{文本对齐：右；左边距：20px；右填充：30px；}
.post nav prev a、.post nav next a{字体系列：Arial；字体重量：500；字体大小：20px；-webkit转换：全部0.4s易用性；转换：全部0.4s易用性；文本装饰：无；}
.post nav prev a:hover.post nav next a:hover{color:#000；}
.post nav prev:之前，.post nav next:之前{
字体系列：Arial；
字号：28px；
颜色：#aaa；
显示：块；
位置：绝对位置；
排名：0；
底部：0；
线高：1.5em；
高度：1.5em；
宽度：30px；
保证金：自动；
文本对齐：居中；
}
.post nav prev:在{left:0；内容：'\00AB'；}之前
.post nav next:在{right:0；内容：'\00BB'；}之前
非常感谢您！救了我一天。：）
    .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;}