时间戳

首页 > 解决方案 > 使用弹性显示垂直居中列表？

html - 使用弹性显示垂直居中列表？

问题描述

我第一次使用网格布局，想要对齐和对齐列表项，对齐工作，但我不能让对齐工作。

我决定在子 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;
}

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

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

标签： htmlcssflexboxcss-grid

解决方案

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

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

推荐阅读