How To Center Cards Within Div While Maintaining A Left-Align

I am currently building an app making use of cards. I would like the cards to be centered horizontally within the container, however the last row should be aligned left. Websites s

Solution 1:

You can get this effect setting some li fillers.

They take width, so that the last true li will be pushed to the left, but they have 0 height so visually everything is ok.

You need as many of them as the maximum number of columns that your design can get, minus 1.

I hate setting fake DOM elements, but it works ...

.container {
  width: 350px;
  height: 100%;
  background-color: red;
}
ul {
  list-style-type: none;
  padding: 0px;
  text-align: center;
}
li {
  height: 100px;
  width: 100px;
  background-color: blue;
  display: inline-block;
}
.dummy {
    height: 0px;
}

<div class="container">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="dummy"></li>
    <li class="dummy"></li>
  </ul>
</div>

Solution 2:

There is a relatively new property (still partly experimental) text-align-last

.container {
  width: 350px;
  height: 100%;
  background-color: red;
}
ul {
  list-style-type: none;
  padding: 0px;
  text-align: center;
  -ms-text-align-last: left;
  -webkit-text-align-last: left;
  -moz-text-align-last: left;
  text-align-last: left;
}
li {
  height: 100px;
  width: 100px;
  background-color: blue;
  display: inline-block;
}

<div class="container">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Works in FF & IE (but WebKit based browsers are bugged at the moment)

Text-Align-Last @ MDN

Browser Support @ CanIUs.com