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

Demo

此外，我不认为您正在重置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标签的高度。

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

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

4 个答案: