vertical aligner plusieurs lignes éclatent

Question

Je veux aligner verticalement le texte dans mes liens comme ceci:

Le bloc entier sont des liens, et ils sont tous de la même taille. J'ai essayé de régler la hauteur de ligne à la hauteur du récipient pour centrer puis remettre la ligne en hauteur avec une portée avec une hauteur de ligne définie à l'intérieur du lien, mais cela n'a pas fonctionné:

Voici mon code:

    <section class="faq"> 
         <nav> 
          <ul class="nav nav--stacked"> 
           <li><a href=""><span>où est la bulle à verre la plus proche ?</span></a></li> 
           <li><a href=""><span>quand sont les ramassages ?</span></a></li> 
           <li><a href=""><span>x</span></a></li> 
           <li><a href=""><span>x</span></a></li> 
           <li><a href=""><span>x</span></a></li> 
          </ul> 
         </nav> 
        </section> 

et le css:

.faq a { 
    display: block; 
    padding: 15px; 
    height: 100px; 
    line-height: 100px; 
    padding-left: 90px; 
    background: #f2f2f2; 
    color: #bdbdbd; 
    text-transform: uppercase; 
    margin-bottom: 10px; 
    font-size: 13px; } 

.faq a span { 
    line-height: 1.7; } 

essayé le chemin "table-cell", mais je ne l'ai pas réussi à travailler. Aussi, si vous avez une solution plus propre, ce serait génial et très apprécié!

Live version here

Answer 1

Je pense que vous avez besoin de ce changement:

.faq a { 
    display: block; 
    padding: 15px; 
    height: 100px; 
    /*line-height: 100px;*/ <---- remove 
    padding-left: 90px; 
    background: #f2f2f2; 
    color: #bdbdbd; 
    text-transform: uppercase; 
    /*margin-bottom: 10px;*/ <--- delete 
    font-size: 13px; 
} 

.nav--stacked > li { 
    display: list-item; 
    margin-bottom: 20px; 
} 


.nav--stacked > li > a { 
    display: table-cell; 
    vertical-align: middle; 
    width: 237px; 
} 

Answer 2

Supprimer ou diminuer votre rembourrage .faq a. Aussi ce code line-height l'effet. Et inclure background-image: pour votre image.

Answer 3

Ok, pour essayer de résoudre tous vos problèmes, voici comment je l'aurais écrit. Dites-moi si cela marche pour vous.

HTML:

<nav class="faq"> 
    <ul class="nav nav--stacked"> 
     <li><a href="">où est la bulle à verre la plus proche ?</a></li> 
     <li><a href="">quand sont les ramassages ?</a></li> 
     <li><a href="">x</a></li> 
     <li><a href="">x</a></li> 
     <li><a href="">x</a></li> 
    </ul> 
</nav> 

CSS:

.faq ul { 
    margin: 0; 
    padding: 0; 
} 
.faq li { 
    list-style: none; 
    padding: 0 0 0 90px; 
    background: #f2f2f2; 
    color: #bdbdbd; 
    height: auto; 
    line-height: 100px; 
    font-size: 13px; 
    text-decoration: none; 
    text-transform: uppercase; 
    margin: 0 0 10px 0; 
} 
.faq li:hover { 
    background: #d9dfdc; 
    color: #fff; 
} 
.faq li a { 
    color: #c0c0c0; 
    text-decoration: none; 
} 
.faq li:hover a { 
    color: #fff; 
} 

Fiddle: http://jsfiddle.net/zp238/2/