html - 如何像金字塔一样按行对齐列表项？

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>

我希望 Ken Cross 和 Karen Heffron 在 Melissa Cross 和 Jacob Cross 之间形成一个金字塔。

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>