html - li-tags 在 ul-tag 中垂直对齐，而不是文本本身

Question

我的笔:http://codepen.io/helloworld/pen/pCdBe

考虑到父 ul 的高度，我在 ul 标签中垂直对齐了 3 个 li 元素，并使用百分比值。

我还希望像 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; 或 行高属性

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

Demo

此外，我认为您不会在 codepen 演示中重置样式表，搜索 CSS reset，您将获得大量重置样式表，这将重置浏览器应用的默认样式。