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 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?
This question is related to
css
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
<td class='alnright'>text to be aligned to right</td>
<style>
.alnright { text-align: right; }
</style>
td cellThe 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;
selector {
margin: top right bottom left;
}
td {
/* there is a shorthand, TODO! */
margin: auto 0 auto auto;
}
td {
margin: auto auto auto auto;
}
/* or the short-hand */
margin: auto;
td {
margin: auto;
}
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.
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/
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:
Source: Stackoverflow.com