вертикальное выравнивание иконы внутри 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/

Answer 2

post-nav { 
    margin: 20px 0; 
} 

.post-nav-prev, .post-nav-next { 
    float: left; 
    padding: 10px; 
    border: 1px solid #aaa; 
    background: #fff; width: 280px; 
} 

// использование поплавка: влево для перемещения на левой стороне 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; 
} 

Answer 3

Попробуйте добавить поплавок: влево; и плавать: право на свой пред/следующий, а затем установить ширину своего родителя:

.post-Nav {маржа: 20px 0; ширина: 700px;}

.post-нав-пред, .POST -nav-next {float: left; padding: 10px; border: 1px solid #aaa; background: #fff; width: 298px;} .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; размер шрифта: 20 пикселей; -webkit-переход: все 0.4s легкость; переход: все 0.4s легкость; текст-отделка: нет;} .post-нав-ПРЕД в: парить, .post-СЧА следующий: с парения {цвет: # 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;} 

http://jsfiddle.net/5q0nzrw8/3/

Answer 4

Я бы удалить иконки полностью и применяются непосредственно к их родителям (после создания position:relative).

/*mini reset of box-sizing for current elements*/ 
 
.post-nav *{ 
 
    -webkit-box-sizing:border-box; 
 
    -moz-box-sizing:border-box; 
 
    -ms-box-sizing:border-box; 
 
    -o-box-sizing:border-box; 
 
    box-sizing:border-box; 
 
} 
 

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

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

 
.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:before, .post-nav-next:before { 
 
    font-family: Arial; 
 
    font-size: 28px; 
 
    color: #aaa; 
 
    display:block; 
 
    position:absolute; 
 
    top:0; 
 
    bottom:0; 
 
    line-height:1.5em; 
 
    height:1.5em; 
 
    width:30px; 
 
    margin:auto; 
 
    text-align:center; 
 
} 
 
.post-nav-prev:before {left:0; content: '\00AB';} 
 
.post-nav-next:before {right:0; content: '\00BB';}

<div class="post-nav"> 
 
    <div class="post-nav-prev"> 
 
    <a href="#" rel="prev">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</a> 
 
    </div> 
 
    <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> 
 
    </div> 
 
</div>