テキストを中央に左右に並べるにはどうすればよいですか？

Question

大きなテキストをページの中央の両側に揃えようとしています。例：

Current Recommendation: Open 
     Current Status: Closed 

しかし、そのテキストを中心にして大きくすることを想像してください。

私が今までこれを達成できる唯一の方法はテーブルですが、それはウェブレイアウトに対する現代的なアプローチではないことがわかります。ここに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

それは基本的にロジックにラベルを付け、値...これを達成するための方法は、ラベルに幅を追加して、右のそれ内のテキストの整列で、値はテキストを左揃えとスパンかもしれません両方とも左に浮かんだ。

その類似のものを使用すると、テーブルを行っているが、あなたが今までそれがある...同じロジックが

Answer 2

あなたは幅の50％にdivをフロート可能性が適用され、ラベル/スパンまたはDT DL ddを使用して。

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

あなたは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 4

上記の回答で語ったようあなたはdisplay:flex;を使用することができます。しかし、あなたのようなスタイルでは、私は浮動小数点で作成しました。

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

・ホープ、このことができます：

が更新jsfiddle

コードを参照してください！