html - 如何左右对齐文本居中？

Question

我正在尝试将大文本与页面中心的两侧对齐。例如:

Current Recommendation: Open
        Current Status: Closed

但想象一下文本居中且更大。

到目前为止，我能够完成此任务的唯一方法是使用表格，但我知道这不是一种现代的 Web 布局方法。这是 jsfiddle:https://jsfiddle.net/nyLLzy1m/3/

有没有办法在没有表格的情况下在 HTML 和 CSS 中做到这一点？我试过左右浮动的跨度，但文本一直 float 到右侧或左侧，而不是中心的右侧或左侧。

p {
    margin: 0;
}

<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
  <tbody>
    <tr>
      <td align="right" width="50%" style="padding-right: 5px;">
        <p style="font-size: 20px;">Current Recommendation:</p>
      </td>
      <td align="left" width="50%" style="padding-left: 5px;">
        <p style="font-size: 20px;">Open</p>
      </td>
    </tr>
    <tr>
      <td align="right" width="50%" style="padding-right: 5px;">
        <p style="font-size: 20px;">Current Status:</p>
      </td>
      <td align="left" width="50%" style="padding-left: 5px;">
        <p style="font-size: 20px;">Closed</p>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

您可以使用 display: flex; 执行此操作:

.centered {
  display: flex;
}

.centered .left {
  text-align: right;
  width: 50%;
}

.centered .right {
  text-align: left;
  width: 50%;
  padding: 0 0 0 10px;
  box-sizing: border-box;
}

<div class="centered">
  <div class="left">
    Current Recommendation:
  </div>
  <div class="right">
    Open
  </div>
</div>
<div class="centered">
  <div class="left">
    Current Status:
  </div>
  <div class="right">
    Closed
  </div>
</div>