Question

我有两个段落，包括3个跨度。上跨区有文字＆＃34; Auftrag 1-3＆＃34 ;,低层＆＃34;下载＆＃34;。

我希望底部跨度（下载）直接位于＆＃34; Auftrag 1-3＆＃34;下面。

现在只有中间的一个完全居中，如果您不理解上述文字，可以查看http://beta.playlikelars.de/iv.php。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

使用表格，而不是<p>和<span>标记。表格是迄今为止最短且最清晰的方式。

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>

css属性display: table也可以模仿：

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>

Answer 2

最好将按钮分成自己的div，然后确保如果希望元素保持居中，则在两侧都给出边距。如果您只想让文本居中text-align: center;，则会将元素的内容居中。

.container {
  display: flex;
}

.container-btns {
  margin: 15px;
}

.top {
  text-align: center;
  background: #ccc;
  padding: 10px;
}

.bottom {
  text-align: center;
  background: blue;
  color: #fff;
  padding: 10px;
}

<div class="container">
  <div class="container-btns">
    <div class="top">Auftrag 1</div>
    <div class="bottom">Download</div>
  </div>

  <div class="container-btns">
    <div class="top">Auftrag 3</div>
    <div class="bottom">Download</div>
  </div>

  <div class="container-btns">
    <div class="top">Auftrag 2</div>
    <div class="bottom">Download</div>
  </div>
</div>

中心跨度低于另一个跨度

2 个答案: