I'm trying to align large text to both sides of the center of a page. For example:
Current Recommendation: Open
Current Status: Closed
But imagine that text centered and larger.
The only way I've been able to accomplish this so far is with a table but I know that's the not a modern approach to web layouts. Here's the jsfiddle: https://jsfiddle.net/nyLLzy1m/3/
Is there a way to do this in HTML and CSS without a table? I've tried spans with float right and left but then the text floats all the way to the right or left, not right or left of center.
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
would do the trickmargin: auto
andmargin: 0 auto
align all text to the center. Because the number of characters are going to vary from one line to the next, you wouldn't see all left columns right aligned to center and all right columns left aligned to center.