4

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>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Patrick
  • 11,552
  • 7
  • 29
  • 41
  • ```margin: 0 auto``` would do the trick – AtulBhatS Jun 19 '17 at 07:46
  • I don't think either of those two solutions would work since `margin: auto` and `margin: 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. – Patrick Jun 19 '17 at 07:55

4 Answers4

1

You can do this with 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>
Huelfe
  • 1,776
  • 16
  • 25
1

You could use display:flex; as told in an answer above. But in your kind of style i've created it with floats.

See the updated jsfiddle

The code:

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

Hope this helps!

Deathstorm
  • 818
  • 11
  • 36
0

You could float divs with 50% of width.

<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>
Carl Binalla
  • 5,393
  • 5
  • 27
  • 46
Davor Mlinaric
  • 1,989
  • 1
  • 19
  • 26
-1

It basically label and value logic... The way to achieve this is add width to the label and right align the text within it and the value could be span with text left align.. both floated left.

Its similar thing as you have done with tables, but you use label/span or dt dl dd, which ever it is... same logic applies

Chetan
  • 945
  • 1
  • 5
  • 14