正確居中的嵌套元素

Question

我有一堆定位/顯示內嵌塊，因此與垂直對齊頂部的李元素。

在這些李元素我使用隱藏的複選框和標籤的實際內容。 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 */ 
} 

什麼會我，而不是垂直對齊必要在這裏使用？爲什麼？

Answer 1

您可以使用line-height，作爲li的height是固定，您可以設置一樣line-height。

Demo

li { 
 
    background: orange; 
 
    display: inline-block; 
 
    height: 60px; 
 
    text-align: center; 
 
    padding: 0 12px; 
 
    line-height: 60px; 
 
} 
 
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>

Answer 2

嘗試柔性佈局。

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>