李標籤在UL標籤垂直排列而不是文字本身

Question

我的筆：http://codepen.io/helloworld/pen/pCdBe

我已經對準了UL標籤3個li元素垂直百分比值considerung父UL的高度。

我也希望像1或2這樣的li元素文本是垂直對齊的，並且筆中還存在一個錯誤。

爲什麼左邊的數字有這樣的差距？

<ul id="navigationWheeler" > 
    <li>1</li> 
    <li style="background-color: #0094ff;">2</li> 
    <li>3</li> 
    </ul> 

#navigationWheeler { 
    height: 300px; 
    width:30px; 
    text-align: center; 
    vertical-align: middle; 
    border: black solid 1px; 
    background-color: lightgray; 
} 

li{ 
    list-style:none; 
    height:33%; 
    vertical-align: middle; 
} 

Answer 1

li標籤贊同垂直方向而不是其內容，所以爲了對齊內容垂直要麼你需要使用display: table-cell;或line-height財產

li{ 
    list-style:none; 
    height:33%; 
    vertical-align: middle; 
    line-height: 100px; 
} 

Demo

而且我不不要以爲你在你的codepen demo中重置樣式表，搜索CSS重置，你會得到大量的重置樣式表，這將重置瀏覽器應用的默認樣式。

Answer 2

檢查了這一點：http://codepen.io/anon/pen/xHncd

#navigationWheeler { 
    height: 300px; 
    width:30px; 
    text-align: center; 
    vertical-align: middle; 
    border: black solid 1px; 
    background-color: lightgray; 
} 

li{ 
    list-style:none; 
    height:33%; 
    vertical-align: middle; 
} 

li:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 

這是一個有點哈克，但可以保留百分比高度爲貴麗標籤。

Answer 3

看起來有些填充正在應用於ul。這很可能是瀏覽器的默認樣式，CSS重置會將其刪除。刪除此填充並在ul上放置寬度以水平居中元素。

navigationWheeler { 
    height: 300px; 
    width:30px; 
    text-align: center; 
    vertical-align: middle; 
    border: black solid 1px; 
    background-color: lightgray; 
    padding: 0px; 
    width: 100px; 
} 

將填充添加到li元素可以使文本垂直居中。

li{ 
    list-style:none; 
    height:33%; 
    vertical-align: middle; 
    padding-top: 50%; 
} 

工作實例http://codepen.io/anon/pen/Djzhy

Answer 4

所有的解決方案我已經看到了迄今爲​​止部分工作。

這是一個完整的工作筆：

• 在UL標籤
• 李標籤與父母的受％的高增長沒有填充/保證金。

http://codepen.io/helloworld/pen/IfymB

<ul id="navigationWheeler" > 
    <li> 
     <div>1</div> 
    </li> 
    <li style="background-color: #0094ff;"> 
     <div>2</div> 
    </li> 
    <li> 
     <div>3</div> 
    </li> 
    </ul> 

#navigationWheeler { 
    height: 300px; 
    width:30px; 
    text-align: center; 
    vertical-align: middle; 
    border: black solid 1px; 
    background-color: lightgray; 
    padding:0; 
    margin:0; 
} 

li{ 
    list-style:none; 
    height:33%; 
    vertical-align: middle; 
    display:table; 
} 

div{ 
    width:30px; 
    display:table-cell; 
    vertical-align: middle; 
}