How to center multi column unordered list-CodePudding

So I have this 3 column unordered list code:

<ul style="column-width: 300px; column-gap: 40px;">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
<li>ggg</li>
<li>hhh</li>
<li>iii</li>

How do I center it, so it also stays responsive?

Thank you!

CodePudding user response：

To divide list in 3 columns use column-count: 3;

Common properties are used . But things to notice are padding:0 as ul tag has default padding so to center it we removed the padding. And list-style-position:inside; is used to have bullets inside the container .

Don't hard code value as it will hamper the responsiveness of your code . So I used here values in %

* {
  box-sizing: border-box
}

ul {
  width: 100%;
  column-width: 30%;
  column-gap: 3%;
  column-count: 3;
  padding: 0;
}

li {
  list-style-position:inside;
  border: 1px solid;
  text-align:center;
}

<ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
  <li>ddd</li>
  <li>eee</li>
  <li>fff</li>
  <li>ggg</li>
  <li>hhh</li>
  <li>iii</li>
</ul>

You can use display:flex for to center the list

ul {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  column-width: 300px;
  column-gap: 40px;
}

<ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
  <li>ddd</li>
  <li>eee</li>
  <li>fff</li>
  <li>ggg</li>
  <li>hhh</li>
  <li>iii</li>
</ul>

Also you can center according to bullets by using padding-left: 50%

ul {
  display: block;
  background-color: grey;
  padding-left: 50%;
}

<ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
  <li>ddd</li>
  <li>eee</li>
  <li>fff</li>
  <li>ggg</li>
  <li>hhh</li>
  <li>iii</li>
</ul>

CodePudding user response：

Set a width based on the known columns widths and gap (300*3 40 *2 = 980) and then center using your desired method.

That said, it can't be responsive with fixed pixel columns and gaps.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

ul {
  width: 380px; /* adjusted for demo */
  column-width: 100px; /* adjusted for demo */
  column-gap: 40px;
  display: inline-block;
  list-style: none;
}

body {
  text-align: center;
}

<ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
  <li>ddd</li>
  <li>eee</li>
  <li>fff</li>
  <li>ggg</li>
  <li>hhh</li>
  <li>iii</li>
</ul>