使用弹性显示垂直居中列表？答案

【问题标题】：Using flex display for vertically center a list?使用弹性显示垂直居中列表？
【发布时间】：2020-11-06 20:15:41
【问题描述】：

我第一次使用网格布局，想要对齐和对齐列表项，对齐有效，但我无法使对齐工作。

我决定在子 div 中使用 flex，以便我可以设置网站内容的样式，但没有理由特别使用 flex，如果有更好的方法，请告诉我。这是代码。

 <div class="parent">

    <div id="container-comp">
      <div class="divclass">
        <ul class="listclass">
           <li>something</li>
           <li>something</li>
           <li>something</li>
           <li>something</li>
           <li>something</li>
        </ul>
      </div>
    </div>

</div>

这是css样式：

* {
    padding: 0;
    margin: 0;
}

.parent {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: repeat(2, 2fr) 8fr 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
    
#container-comp { 
    grid-area: 1 / 2 / 2 / 3; 
    background-color: tomato;
}

.divclass {
    display: flex;
    justify-content: center;
    align-items: center;
}

.listclass > li {
    display: inline-block;
}

标记的部分是我遇到问题的代码部分，其余部分都在父类中。

另外设置高度的正确方法是什么？默认情况下（自动）它是如何工作的，但如果我想设置一个特定的高度，我应该使用像grid-template-columns: 100% 1fr 3fr; 这样的 % 吗？

【问题讨论】：

你想关闭 ui 序列吗？

标签： html css flexbox css-grid

【解决方案1】：

尝试调整您的标记，使列表项不会在网格中嵌套得太深 - 您可以在此处进行简化。

<div class="parent">
  <ul id="container-comp" class="divclass listclass">
    <li>something</li>
    <li>something</li>
    <li>something</li>
    <li>something</li>
    <li>something</li>
  </ul>
</div>

【讨论】：

【解决方案2】：

如果您想要水平列表，您可以将inline-block 替换为block 看看这个sn-p。

* {
    padding: 0;
    margin: 0;
}

.parent {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: repeat(2, 2fr) 8fr 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
    
#container-comp { 
    grid-area: 1 / 2 / 2 / 3; 
    background-color: tomato;
}

.divclass {
    display: flex;
    justify-content: center;
    align-items: center;
}

.listclass > li {
    display: block; //here
}

  <div class="parent">
    <div id="container-comp">
      <div class="divclass">
        <ul class="listclass">
           <li>something</li>
           <li>something</li>
           <li>something</li>
           <li>something</li>
           <li>something</li>
        </ul>
      </div>
    </div>
</div>

【讨论】：