Center last li element if column count is 2

Question

I want to make a footer for mobile resolution. If there is only one element in one row I want to center it - can I achieve this using ul li ? My last element is being aligned to left, which I don't want, should I use something else than ul li?

.body {
  max-width: 320px;
  width: 100%;
  background: red;
}

ul {
  column-count: 2;
  padding: 0;
}

ul li {
  list-style: none;
  text-align: center;
}

<div class="body">
  <ul>
    <li>testdwad dada ad ad </li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
  </ul>
</div>

@Paulie_D please add that code and some explanation as an answer. — Fabian S., Nov 09 '21 at 15:12

score 1 · Accepted Answer · answered Nov 09 '21 at 16:08

You can use flexbox with the settings below (also note the width definition for the list elements)

.body {
  max-width: 320px;
  width: 100%;
  background: red;
}

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
}

ul li {
  list-style: none;
  text-align: center;
  width: 50%;
}

<div class="body">
  <ul>
    <li>testdwad dada ad ad </li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
  </ul>
</div>

Center last li element if column count is 2

1 Answers1