Center span below another span

Question

I've got two paragraphs below each other both including 3 spans. The upper spans have the text "Auftrag 1-3", the lower ones "Download".

I want the bottom spans (Download) to be directly centered below "Auftrag 1-3".

Right now only the middle one is perfectly centered, you can have a look at http://beta.playlikelars.de/iv.php if you didn't understood the text above.

#content1 p {
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  font-size: xx-large;
}

#content1 .top {
  background: rgb(11, 81, 146);
  margin-right: 15px;
  padding: 15px;
  color: white;
}

#content1 .bottom {
  background: #d6d6d6;
  padding: 15px;
  margin-right: 15px;
  color: white;
}

<div id="content1">

  <p>
    <span class="top">Auftrag 1</span>
    <span class="top">Auftrag 2</span>
    <span class="top">Auftrag 3</span>
  </p>

  <p>
    <span class="bottom">Download</span>
    <span class="bottom">Download</span>
    <span class="bottom">Download</span>
  </p>

</div>

Answer 1

Use a table, not <p> and <span> tags. Tables are by far the shortest and clearest way of doing this.

td {
    text-align: center;
}

<table>
  <tr>
    <td>Auftrag 1</td>
    <td>Auftrag 2</td>
    <td>Auftrag 3</td>
  </tr>
  <tr>
    <td>Download</td>
    <td>Download</td>
    <td>Download</td>
  </tr>
</table>

The css property display: table can also mimic this:

span {
    text-align: center;
    display: table-cell;
}

p {
    display: table-row;
}

div {
    display: table;
}

<div>
  <p>
    <span>Auftrag 1</span>
    <span>Auftrag 2</span>
    <span>Auftrag 3</span>
  </p>
  <p>
    <span>Download</span>
    <span>Download</span>
    <span>Download</span>
  </p>
</div>