Question

我有一堆li元素，它们使用内联块定位/显示，因此具有vertical-align-top。

在这些li元素中，我使用隐藏的复选框和实际内容的标签。 li元素具有给定的固定高度，我现在希望通过vertical-align：middle或baseline将标签元素在这些元素中垂直正确。

但是这些都不起作用，我也不知道为什么，因为这对于这些嵌套元素来说有点意义。代码看起来有点像这样：

<li>
    <input type="checkbox" id="foo">
    <label for="foo">Content of the element to be positioned at the center of it</label>
</li>

而css就像

li {
    background:orange;
    display:inline-block;
    vertical-align:top;
    height:60px;
    padding:0 12px;
}
li input{
    display:none;
}
li label{
    text-align:center;
    padding:0;
    margin:0;
    vertical-align:middle; /*doesn't work, but this should be the actual behaviour */
}

我需要在这里使用什么而不是vertical-align？为什么？

Answer 1

您可以使用line-height，因为height的{{1}} 已修复，您可以将其设置为li。

Demo

＆＃13;

line-height

＆＃13;

li {
  background: orange;
  display: inline-block;
  height: 60px;
  text-align: center;
  padding: 0 12px;
  line-height: 60px;
}
li input {
  display: none;
}

＆＃13;

Answer 2

尝试flex布局。

li {
    background:orange;
    display:flex;
    height:60px;
    padding:0 12px;
    justify-content: center; /* remove this line if u only want vertical center*/
    align-items: center;
}
li input{
    display:none;
}

<li>
    <input type="checkbox" id="foo">
    <label for="foo">Content of the element to be positioned at the center of it</label>
</li>

嵌套元素正确居中

2 个答案: