使用flexbox中心项目符号列表

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

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

Answer 3

它可以完成，只需将此css添加到您的ul

ul {display：table;保证金：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 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>