CODEWITHSUNDEEP
htmlcssflexboxalignment
Toni
Toni

Reputation: 41

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>

Upvotes: 1

Views: 1659

Answers (4)

Kiran Joshi
Kiran Joshi

Reputation: 151

Try using this

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

Upvotes: 0

Husain Ahmmed
Husain Ahmmed

Reputation: 351

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

Upvotes: 1

Harshit
Harshit

Reputation: 895

It can be done, Just add this css to your ul

ul { display:table; margin:0 auto;}

    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>

Upvotes: 0

Kapa Ionut
Kapa Ionut

Reputation: 11

Try centering the text-list using display:flex; and align-items: center; ;)

Upvotes: 0

Related Questions