三栏居中，内容居中

debugcn 发表于 Dev

安东尼奥

我有一个包含八个项目的列表，我想将它放在三列中以及它的内容中，以便单词与第一行和第二行对齐。实现它的最佳方法是什么？我试过百分比，但内容仍然不一致。

body{
  margin: 0;
  padding: 0;
}
.wk_search-resume-list {
    width: 100%;
    overflow: auto;
}
.wk_search-resume-list li {
    margin-bottom: 16px;
    font-size: 14px;
    position: relative;
    width: 33%;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}
.wk_search-resume {
    background-color: white;
    border: 1px solid #bfbfbf;
    margin: 32px 16px;
    padding: 24px 24px 8px 24px;
    font-size: 0;
    position: relative;
}
.wk_search-resume-list strong {
    display: block;
}
.wk_search-resume-list.wk-interval {
    margin-top: 32px;
    border: 1px solid red;
  padding: 0;
}

<ul class="wk_search-resume-list wk-interval">    
            <li class="wk_search-resume-list--procedure">Tipo de procedimiento <strong>Procedimiento ordinario</strong></li>         
            <li class="wk_search-resume-list--subvoice">Subvoz <strong>Extinción y suspensión del arrendamiento</strong></li>            
            <li class="wk_search-resume-list--favor">A favor <strong>Arrendador</strong></li>  
            <li class="wk_search-resume-list--year">Año <strong>1992</strong></li>     
            <li class="wk_search-resume-list--resource">Tipo de recurso <strong>Procedimiento</strong></li>     
            <li class="wk_search-resume-list--against">En contra <strong>Arrendatario</strong></li>                           
            <li class="wk_search-resume-list--judgment">Sentido del fallo <strong>Arrendador</strong></li>
            <li class="wk_search-resume-list--judgment">Argumentos legales <strong>Crédito bancario</strong></li>           
          </ul>

笔记：

这个信息是动态的，如果只有一个项目，这个项目应该在屏幕上居中。
如果删除了一项，则必须将此项替换为列表中的下一项。

艾金焕

我仍然不清楚你想如何划分这 8 个项目，但这里有一个基本的例子，展示了 CSS Grid 和 Flexbox 的可能性。

JS BIN 示例

ul{
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

li{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。