Как выровнять элементы списка по строкам, например, по пирамиде?

Question

У меня есть ряд элементов списка (3, 2, 1), каждый из которых я хотел бы выровнять по центру, чтобы они выглядели как пирамида.Вот мой код:

.app {
  display: table;
    margin: 0 auto;
}

.row {
    margin-bottom: 20px;
}

.tree ul {
    list-style: none;
}

.node {
    display: inline-block;
    text-align: center;
    margin-right: 10px;
    margin-left: 10px;
    padding-top: 16px;
    width: 130px;
    height: 40px;
    border: 2px solid rgba(0,0,0,.2);
    border-radius: 5px;
    color: rgba(0,0,0,.6);
}

.male {
    background: #a4ecff;
}

.female {
    background: #fdaed8;
}

<div class="app">
  <ul class="row">
    <li class="node male">Ken Cross</li>
    <li class="node female">Karen Heffron</li>
  </ul>
  <ul class="row">
    <li class="node female">Melissa Cross</li>
    <li class="node female">Kristen Cross</li>
    <li class="node male">Jacob Cross</li>
  </ul>
</div>

Я бы хотел, чтобы Кен Кросс и Карен Хеффрон оказались между Крестом Мелиссы и Крестом Джейкоба, чтобы сформировать пирамиду.

Answer 1

Как это?

.app {
  display: table;
    margin: 0 auto;
}

.row {
    margin-bottom: 20px;
    display:flex; /* added */
    justify-content:center; /* added */
}

.tree ul {
    list-style: none;
}

.node {
    display: inline-block;
    text-align: center;
    margin-right: 10px;
    margin-left: 10px;
    padding-top: 16px;
    width: 130px;
    height: 40px;
    border: 2px solid rgba(0,0,0,.2);
    border-radius: 5px;
    color: rgba(0,0,0,.6);
}

.male {
    background: #a4ecff;
}

.female {
    background: #fdaed8;
}

<div class="app">
  <ul class="row">
    <li class="node male">Ken Cross</li>
    <li class="node female">Karen Heffron</li>
  </ul>
  <ul class="row">
    <li class="node female">Melissa Cross</li>
    <li class="node female">Kristen Cross</li>
    <li class="node male">Jacob Cross</li>
  </ul>
</div>