垂直中心的文字在ul li裏

Question

所以，顯然我似乎無法弄清楚爲什麼裏面的文本保持堅持到頂端......我嘗試玩高度，線高度，垂直-aligns，顯示（表，表細胞，內聯塊，內嵌...）和所有的東西，但IDK的爲什麼，我看不出有什麼地方錯了...

的jsfiddle - http://jsfiddle.net/qdq1jg4g/2/

HTML

<header> 
    <span id="headerTitle">Title</span> 

    <ul id="headerMenu"> 
     <a href=""><li> Plugin </li></a> 
     <a href=""><li> how-to </li></a> 
     <a href=""><li> Docs </li></a> 
    </ul> 
</header> 

CSS

#headerMenu{ 
    position: absolute; 
    border: 1px dashed blue; 
    font-size: 16pt; 
    right: 15%; 
    height: 100%; 
    line-height: 100%; 
    bottom: 0px; 
    margin: 0px; 
    padding: 0px; 
} 

#headerMenu a{ 
    height: 100%; 
    line-height: 100%; 
} 

#headerMenu a li{ 
    border: 1px solid red; 
    float: left; 
    list-style: none; 
    height: 100%; 
    line-height: 100%; 
    padding: 0px 20px; 
} 

在此先感謝您。

Answer 1

這裏是嵌有li標籤a標籤做的一種方式：

header{ 
 
    background: #eee; 
 
    color: #333; 
 
    height: 100px; 
 
    width: 100%; 
 
    top: 0px; 
 
    margin: 0px 0px 10px 0px; 
 
    font-size: 26pt; 
 
    position: relative; 
 
    z-index: 100; 
 
    transition: all 0.1s; 
 
} 
 

 
#headerTitle{ 
 
    position: absolute; 
 
    bottom: 15px; 
 
    left: 10px; 
 
} \t \t 
 

 

 
#headerMenu{ 
 
    position: absolute; 
 
    border: 1px dashed blue; 
 
    font-size: 16pt; 
 
    right: 15%; 
 
    height: 100%; 
 
    line-height: 1; 
 
    bottom: 0px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
#headerMenu li { 
 
    float: left; 
 
    display: table; 
 
    border: 1px solid red; 
 
    height: 100%; 
 
    margin: 0 20px; /* optional, depends on your layour */ 
 
} 
 
#headerMenu a { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    border: 1px dashed red; 
 
    height: 100%; 
 
    padding: 0 20px; 
 
}

<header> 
 
    <span id="headerTitle">Title</span> 
 
    
 
    <ul id="headerMenu"> 
 
     <li><a href="plug-in-link">Plugin</a></li> 
 
     <li><a href="how-to-link">how-to</a></li> 
 
     <li><a href="docs-link">Docs</a></li> 
 
    </ul> 
 
</header>