Question

我在此部分中有列表。我想使列表居中，以便项目符号垂直排列。我该如何使用flexbox？

删除flex-direction: column和text-align:center并不是解决方案，因为我在页面的其他内容中需要它们。

.text-list{
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align:center;
}

ul{
  list-style-type:disc;
}

<section class="text-list">
<ul>
<li>short</li>
<li>and very long line</li>
<li>shorter line</li>
</ul>
</section>

Answer 1

更新谢谢@Akash Pandey ul margin：自动建议
您能试试这个example吗？

.text-list{
   display: flex;
   justify-content: left;
   flex-direction: column;
   text-align:left;
 }

ul{
  list-style-type:disc;
  margin: auto;
}

Answer 2

可以做到，只需将此CSS添加到您的ul

ul {display：table; margin：0自动;}

    ul {
      display:table;
      margin:0 auto;
    }
    .text-list {
      display: flex;
      justify-content: center;
      flex-direction: column;
      text-align:center;
    }    
    ul {
      list-style-type:disc;
    }

<section class="text-list">
  <ul>
    <li>short</li>
    <li>and very long line</li>
    <li>shorter line</li>
  </ul>
</section>

Answer 3

尝试使用text-list和display:flex;将align-items: center;居中；）

Answer 4

尝试使用此

.text-list{
    display:flex;
    justify-content:center;
}

ul{
    min-width:auto;
    display: flex;
    justify-content:flex-start;
    flex-direction:column;
}



<section class="text-list">
    <ul>
        <li>short</li>
        <li>and very long line</li>
        <li>shorter line</li>
    </ul>
</section>

使用flexbox将项目符号列表居中

4 个答案: