垂直對齊多行打破了

Question

我要垂直對齊鏈接中的文字是這樣的：

整個塊是鏈接，它們都是相同的大小。我試圖將行高設置爲容器的高度居中，然後用跨度鏈路內的情況定義的line-height重置行高度，但它沒有工作：

這裏是我的代碼：

    <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> 

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

試過 「表芯」 的方式，但我沒有得到它的工作。此外，如果您有任何人有更清潔的解決方案，這將是非常棒的，非常感謝！

Live version here

Answer 1

我認爲你需要這種變化：

.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

刪除或減少.faq a填充。另外這個代碼line-height影響它。幷包括background-image:爲您的圖像。

Answer 3

好吧，試着解決你所有的問題，在這裏我將如何寫它。請讓我知道這對你有沒有用。

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

小提琴：http://jsfiddle.net/zp238/2/