Vertical align multiple lines break out

Question

I want to vertically align the text in my links like this :

The whole block are links, and they are all the same size. I tried to set the line-height to the height of the container to center it and then reset the line-height with a span with a defined line-height inside the link but it didn't work :

Here's my 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>

and the 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; }

Tried the "table-cell" way, but I didn't get it to work. Also, if any of you have a cleaner solution, it would be awesome and very much appreciated !

Live version here

Answer 1

I think you need this change:

.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

Delete or decrease your .faq a padding. Also this code line-height effect it. And include background-image: for your image.

Answer 3

Ok, to try and address all of your issues, here how I would have wrote it. Let me know if it works for you.

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/