CODEWITHSUNDEEP
htmlcssflexbox
Jake Cross
Jake Cross

Reputation: 523

How can I align list items in rows like a pyramid?

I have a row of list items (3, 2, 1) which I'd like to have each aligned in the center allowing them to look like a pyramid. Here's my code so far:

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

I would like Ken Cross and Karen Heffron to be in between Melissa Cross and Jacob Cross to form a pyramid.

Upvotes: 0

Views: 1063

Answers (1)

doğukan
doğukan

Reputation: 27391

Like this?

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

Upvotes: 1

Related Questions