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

Question

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

做vertical align middle好像没什么作用。为什么垂直居中对齐在 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 给 child ，但这不起作用。

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>