alinear a la derecha en una celda de tabla con CSS

Tengo el viejo código clásico como este

<td align="right">

Que hace lo que dice: alinea a la derecha el contenido en la celda. Así que si pongo 2 botones en esta celda, aparecerán en el sitio correcto de la celda.

Pero entonces estaba refactorizando esto a CSS, pero no hay tal cosa como alineación correcta? Veo alineación de texto, ¿es lo mismo?

 103
css
Author: alex, 2009-12-15
Source

3 answers

Use

text-align: right

La propiedad CSS text-align describe cómo es el contenido en línea como el texto alineado en su elemento de bloque padre. text-align no controla el alineación de elementos de bloque en sí, solo su contenido en línea.

Véase

Text-align

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

<style>
    .alnright { text-align: right; }
</style>
 129
Author: rahul,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-12-15 10:24:35

Lo que funcionó para mí ahora es:

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>

Véase el siguiente violín:

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

 5
Author: Joysn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-07 10:42:19

No te olvides del selector 'nth-child' de CSS3. Si conoce el índice de la columna en la que desea alinear el texto a la derecha, solo puede especificar 

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

En los casos con tablas grandes, esto puede ahorrarle mucho marcado adicional.

Aquí hay un violín para ti.... https://jsfiddle.net/w16c2nad /

 3
Author: Suite 404 not found,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-22 01:49:16