在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 可以工作，但是您必须将其放在网格父级/容器

上

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