在 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 个赞的答案（接受的答案只有 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 确实工作，但你必须把它放在 grid-parent / container

.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>