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

Question

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

我已经将 ul-tag 中的 3 个 li 元素与考虑到父 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;
}

演示

此外，我认为您不会在您的 codepen 演示中重置样式表，搜索 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;
}

这有点 hacky，但你可以将百分比作为你的 li-tags 的高度。

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-tag 上没有填充/边距
• li-tags 随其父级的高度增加 %。

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