CSS: center parent ul tag, left align li tag-CodePudding

I am setting a height on the ul tag and then rendering it as separate columns. I want this ul tag to be centered in the container div. And all the li tags to be left aligned. So far I have this:

.container {
  border: 2px solid green;
}
ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100px;
  align-items: center;
}

<div class= "container">
  <ul>
    <li>item 1</li>
    <li>item 22</li>
    <li>item 333</li>
    <li>item 4444</li>
    <li>item 55555</li>
    <li>item 666666</li>
    <li>item 7777777</li>
    <li>item 88888888</li>
    <li>item 999999999</li>
    <li>item 10</li>
  </ul>
</div>

CodePudding user response：

Please let me know if that is what you had in mind, otherwise explain further please.

.container {
  border: 2px solid green;
  display: flex;
  justify-content: center;
}
ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100px;
}

CodePudding user response：

Try turning the div container into a flex-box, then use align-items to center the list.

.container {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

<div class= "container">
  <ul>
    <li>item 1</li>
    <li>item 22</li>
    <li>item 333</li>
    <li>item 4444</li>
    <li>item 55555</li>
    <li>item 666666</li>
    <li>item 7777777</li>
    <li>item 88888888</li>
    <li>item 999999999</li>
    <li>item 10</li>
  </ul>
</div>