将li标签垂直放置在ul标签的中间位置

Question

我有一个ul标记，其中包含height:300px和一些li标记。

<ul>
   <li> some text</li>
   <li> some other text</li>
</ul>

我想将此列表垂直放在ul标签的中间位置 我不想设置posittion:absolute。 我测试下面的CSS，但它不起作用！

ul{
  height: 300px;
  vertical-align: middle;
}
li{
  margin:auto;
}

请给我一些css！

Answer 1

喜欢这个吗？

CSS

ul {
    height: 300px;
    display: table-cell;
    vertical-align: middle;
    background-color: lime;
}

li {
    display: inline-block;
    background-color: fuchsia;
}​

样本

JSFiddle

Answer 2

这是我的解决方案，但它需要一个具有固定高度的额外元素（在本例中为300px）。然后允许UL元素默认为height: auto;，并通过隐藏的伪元素与中间垂直对齐。

jsfiddle: Element vertically aligned to the middle

伪元素位于包含元素的外部和左侧，并设置为vertical-align: middle;。

container:before {
  cotent: '';
  display: inline-block;
  width: 100%;
  height: 100%;
  margin-left: -100%;
  vertical-align: middle;
}

这允许容器的子元素垂直对齐伪元素，伪元素具有父元素的高度。