Search code examples
htmlcssflexboxalignment

Centering bulleted list with flexbox

I have list inside section. I want to center the list so that bullets are vertical lined. How do I do that with flexbox?

Removing flex-direction: column and text-align:center is not an answer, since I need them in other content of the page.

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

Solution

  • Update Thanks @Akash Pandey ul margin: auto suggestion
    Can you try this example also see below

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

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