CODEWITHSUNDEEP
htmlcsstext-alignment
Patrick
Patrick

Reputation: 14278

How can I left and right align text to center?

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>

Upvotes: 4

Views: 3159

Answers (4)

Deathstorm
Deathstorm

Reputation: 847

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!

Upvotes: 1

Huelfe
Huelfe

Reputation: 1836

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>

Upvotes: 1

Davor Mlinaric
Davor Mlinaric

Reputation: 2017

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>

Upvotes: 0

Chetan
Chetan

Reputation: 955

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

Upvotes: -1

Related Questions