align right in a table cell with CSS

Question

I have the old classic code like this   lt td align  right  gt    which does what it says  it right aligns the content in the cell  So if I put 2 buttons in this cell  they will appear at the right site of the cell   But then I was refactoring this to CSS  but there is no such thing as right align  I see text-align  is that the same

User · Accepted Answer

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   lt td class  alnright  gt text to be aligned to right lt  td gt    lt style gt       alnright   text-align  right     lt  style gt

User · Answer

What worked for me now is   CSS    right     text-align  right    margin-right  1em      left     text-align  left    margin-left  1em      HTML    lt table width  100   gt     lt tbody gt       lt tr gt         lt td class  left  gt           lt input id  abort  type  submit  name  abort  value  Back  gt           lt input id  save  type  submit  name  save  value  Save  gt         lt  td gt         lt td class  right  gt           lt input id  delegate  type  submit  name  delegate  value  Delegate  gt           lt input id  unassign  type  submit  name  unassign  value  Unassign  gt           lt input id  complete  type  submit  name  complete  value  Complete  gt         lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt    See the following fiddle   http   jsfiddle net Joysn 3u3SD

User · Answer

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

User · Answer

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        there is a shorthand  TODO        margin  auto 0 auto auto      justify center  td     margin  auto auto auto auto        or the short-hand    margin  auto    align center  td     margin  auto      JS Fiddle 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

[css] align right in a table cell with CSS

Examples related to css