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

Question

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

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> 

Answer 1

你可以浮动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> 

Answer 2

你可以用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> 

Answer 3

你可以使用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> 

希望这可以帮助！

Answer 4

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

它与你用表格做的类似，但是你使用label / span或dt dl dd，它曾经是......同样的逻辑适用