173

I have the old classic code like this,

<td align="right">

which does what it says: it right aligns the content in the cell. So if I put two buttons in this cell, they will appear at the right site of the cell.

I was refactoring this to CSS, but there doesn't seem to be anything as right align. I see text-align, but is it that the same?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Michel
  • 23,085
  • 46
  • 152
  • 242

4 Answers4

217

Use

text-align: right

The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements itself, only their inline content.

See

text-align

<td class='alnright'>text to be aligned to right</td>

<style>
    .alnright { text-align: right; }
</style>
rahul
  • 184,426
  • 49
  • 232
  • 263
  • 5
    is a a block element because that one doesn't get aligned right? – Michel Dec 15 '09 at 10:38
  • 1
    It depends. I have a paragraph, which is block, inside a table cell (css display: table-cell), and if I give that paragraph a width of 100% it starts to respect text-align right. I assume defining a width isn't always the best thing. – Costa Michailidis Mar 26 '13 at 18:50
  • 3
    I take it then, that the property `text-align` is not very well named if it applies to buttons and controls as well as text. Perhaps this should have been called `content-align`? – Ben Feb 26 '14 at 10:10
  • 5
    Michel: set the block element to inline-block, e.g.: td input { display:inline-block; } – shalamos Nov 14 '14 at 13:15
  • 1
    or me only works float:right or good old align="right". w t f ? – Tone Škoda Feb 20 '15 at 01:12
  • 1
    oh and FYI for this to work, the table has to be width: 100% – Jan Dec 27 '20 at 22:51
12

Don't forget about CSS3's 'nth-child' selector. If you know the index of the column you wish to align text to the right on, you can just specify

table tr td:nth-child(2) {
    text-align: right;
}

In cases with large tables this can save you a lot of extra markup!

here's a fiddle for ya.... https://jsfiddle.net/w16c2nad/

Suite 404 not found
  • 137
  • 1
  • 3
9

What worked for me now is:

CSS:

.right {
  text-align: right;
  margin-right: 1em;
}

.left {
  text-align: left;
  margin-left: 1em;
}

HTML:

<table width="100%">
  <tbody>
    <tr>
      <td class="left">
        <input id="abort" type="submit" name="abort" value="Back">
        <input id="save" type="submit" name="save" value="Save">
      </td>
      <td class="right">
        <input id="delegate" type="submit" name="delegate" value="Delegate">
        <input id="unassign" type="submit" name="unassign" value="Unassign">
        <input id="complete" type="submit" name="complete" value="Complete">
      </td>
    </tr>
  </tbody>
</table>

See the following fiddle:

http://jsfiddle.net/Joysn/3u3SD/

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Joysn
  • 987
  • 1
  • 16
  • 30
8

How to position block elements in a td cell

The answers provided do a great job to right-align text in a td cell.

This might not be the solution when you're looking to align a block element as commented in the accepted answer. To achieve such with a block element, I have found it useful to make use of margins;

General syntax

selector {
  margin: top right bottom left;
}

Justify right

td > selector {
  /* there is a shorthand, TODO!  */
  margin: auto 0 auto auto;
}

Justify center

td > selector {
  margin: auto auto auto auto;
}

/* or the short-hand */
margin: auto;

Align center

td > selector {
  margin: auto;
}

JSFiddle example

Alternatively, you could make you td content display inline-block if that's an option, but that may distort the position of its child elements.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
John Mutuma
  • 3,150
  • 2
  • 18
  • 31