如何将列表项排列成金字塔状？

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

喜欢吗？

join()

.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;
}