在CSS网格内垂直对齐列表项

Question

如何在CSS网格中垂直对齐列表项？

做垂直对齐中间似乎没有做任何事情。为什么垂直对齐中间不能在CSS网格内工作？

以下是第一次尝试：

.sublist-grid {
    display: grid;
}

.list-grid {
    display: grid;
    display: -ms-grid;
    -ms-grid-columns: auto auto;
    grid-template-columns: auto auto;
}

.list-grid li {
    line-height: 30px;
    font-size: 14px;
    padding-left: 30px;
    padding-right: 10px;
    list-style-position: inside;
    width: 230px;
    text-transform: none;
}

<div class="sublist-grid" style="left: -250px;display: grid;">
<ul class="list-grid">
<li>
<a href="#" class="">List item</a>
</li>
<li>
<a href="#" class="">List itemList itemList itemList itemList itemList item</a>
</li>
<li>
<a href="#" class="">List itemList item</a>
</li>
<li>
<a href="#" class="">List itemList itemList itemList itemList itemList item</a>
</li>
<li>
<a href="#" class="">List itemList itemList item</a>
</li>
</ul>
</div>

我需要让左边的项目（只有一行）在中间与较长的项目对齐。

我发现：

Vertical align inside css grid

.sublist-grid {
    display: grid;
}

.list-grid {
    display: grid;
    display: -ms-grid;
    -ms-grid-columns: auto auto;
    grid-template-columns: auto auto;
}

.list-grid li {
    /*Answer suggests flex on parent, flex 1 on child*/
    display: flex;

    line-height: 30px;
    font-size: 14px;
    padding-left: 30px;
    padding-right: 10px;
    list-style-position: inside;
    width: 230px;
    text-transform: none;
}

.list-grid li a {
    flex: 1;
}

<div class="sublist-grid" style="left: -250px;display: grid;">
<ul class="list-grid">
<li>
<a href="#" class="">List item</a>
</li>
<li>
<a href="#" class="">List itemList itemList itemList itemList itemList item</a>
</li>
<li>
<a href="#" class="">List itemList item</a>
</li>
<li>
<a href="#" class="">List itemList itemList itemList itemList itemList item</a>
</li>
<li>
<a href="#" class="">List itemList itemList item</a>
</li>
</ul>
</div>

基本上（据我所知）这个答案建议添加flex并给孩子提供flex: 1，但这不起作用。

How to vertically align objects in CSS when working with CSS grids?

5个upvotes的答案（接受的答案只有2）只是建议添加align-items: center;但它不起作用：

.sublist-grid {
    display: grid;
}

.list-grid {
    display: grid;
    display: -ms-grid;
    -ms-grid-columns: auto auto;
    grid-template-columns: auto auto;
}

.list-grid li {
   /*does not work*/
    align-items: center;

    line-height: 30px;
    font-size: 14px;
    padding-left: 30px;
    padding-right: 10px;
    list-style-position: inside;
    width: 230px;
    text-transform: none;
}

<div class="sublist-grid" style="left: -250px;display: grid;">
<ul class="list-grid">
<li>
<a href="#" class="">List item</a>
</li>
<li>
<a href="#" class="">List itemList itemList itemList itemList itemList item</a>
</li>
<li>
<a href="#" class="">List itemList item</a>
</li>
<li>
<a href="#" class="">List itemList itemList itemList itemList itemList item</a>
</li>
<li>
<a href="#" class="">List itemList itemList item</a>
</li>
</ul>
</div>

为什么这些答案都不适用于我的代码？如何在CSS网格中垂直居中显示项目？

Answer 1

align-items确实有效，但您必须将它放在网格父/容器上

.sublist-grid {
    display: grid;
}

.list-grid {
    display: grid;
    display: -ms-grid;
    -ms-grid-columns: auto auto;
    grid-template-columns: auto auto;
   /*does  work*/
    align-items: center;
}

.list-grid li {


    line-height: 30px;
    font-size: 14px;
    padding-left: 30px;
    padding-right: 10px;
    list-style-position: inside;
    width: 230px;
    text-transform: none;
    border:1px solid grey;
}

<div class="sublist-grid" style="left: -250px;display: grid;">
<ul class="list-grid">
<li>
<a href="#" class="">List item</a>
</li>
<li>
<a href="#" class="">List itemList itemList itemList itemList itemList item</a>
</li>
<li>
<a href="#" class="">List itemList item</a>
</li>
<li>
<a href="#" class="">List itemList itemList itemList itemList itemList item</a>
</li>
<li>
<a href="#" class="">List itemList itemList item</a>
</li>
</ul>
</div>

Answer 2

好，我知道了：

它的：

.list-grid li {
   display: flex;
   align-items: center;
}

所以：

.sublist-grid {
    display: grid;
}

.list-grid {
    display: grid;
    display: -ms-grid;
    -ms-grid-columns: auto auto;
    grid-template-columns: auto auto;
}

.list-grid li {
    /*this is it*/
    display: flex;
    align-items: center;

    line-height: 30px;
    font-size: 14px;
    padding-left: 30px;
    padding-right: 10px;
    list-style-position: inside;
    width: 230px;
    text-transform: none;
}

<div class="sublist-grid" style="left: -250px;display: grid;">
<ul class="list-grid">
<li>
<a href="#" class="">List item</a>
</li>
<li>
<a href="#" class="">List itemList itemList itemList itemList itemList item</a>
</li>
<li>
<a href="#" class="">List itemList item</a>
</li>
<li>
<a href="#" class="">List itemList itemList itemList itemList itemList item</a>
</li>
<li>
<a href="#" class="">List itemList itemList item</a>
</li>
</ul>
</div>