如何将文本左右对齐到中心？答案

【问题标题】：How can I left and right align text to center?如何将文本左右对齐到中心？
【发布时间】：2017-06-19 07:37:21
【问题描述】：

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

Current Recommendation: Open
        Current Status: Closed

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

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

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

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>

【问题讨论】：

margin: 0 auto 可以解决问题
我认为这两种解决方案中的任何一种都行不通，因为 margin: auto 和 margin: 0 auto 将 all 文本对齐到中心。因为每一行的字符数会有所不同，所以您不会看到所有左列都右对齐到中心，所有右列都左对齐到中心。

标签： html css text-alignment

【解决方案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>

【讨论】：

【解决方案2】：

您可以使用display:flex;，如上面的答案中所述。但是按照你的风格，我用花车创造了它。

查看更新后的jsfiddle

代码：

.main {
  width: 100%;
}

.first,
.second {
  width: 50%;
  float:left;
}

.first > p {
  text-align: right;
}

.second > p {
  text-align: left;
}

  
    <div class="main">
      <div class="first">
      <p>
      Current Recommendation: <br>
      Current Status: 
      </p>
      </div>
      <div class="second">
      <p>
      Open <br>
      Closed
      </p>
      </div>
    </div>

希望这会有所帮助！

【讨论】：

【解决方案3】：

您可以浮动 50% 宽度的 div。

<div style="width:50%; float:left; text-align:right;">Current Recommendation:</div>
<div style="width:50%; float:left;">Open</div>
<div style="width:50%; float:left; text-align:right;">Current Status:</div>
<div style="width:50%; float:left;">Closed</div>

【讨论】：

【解决方案4】：

它基本上是标签和值的逻辑......实现这一点的方法是为标签添加宽度并将其中的文本右对齐，并且值可以与文本左对齐..都向左浮动。

它与您对表格所做的类似，但您使用标签/跨度或 dt dl dd，无论它是什么......同样的逻辑适用

【讨论】：

如果你能用一些代码来支持你的答案会很好
他已经有一些代码，而不是天真......问题是，有没有办法在没有桌子的情况下做到这一点。我的回答解释了他需要什么