alinearse a la derecha en una celda de tabla con CSS

128

Tengo el viejo código clásico como este

<td align="right">

que hace lo que dice: alinea correctamente el contenido en la celda. Entonces, si pongo 2 botones en esta celda, aparecerán en el sitio correcto de la celda.

Pero luego estaba refactorizando esto a CSS, pero ¿no existe una alineación correcta? Veo alinear texto, ¿es lo mismo?

css

— Michel
fuente

154

Utilizar

text-align: right

La propiedad CSS de alineación de texto describe cómo se alinea el contenido en línea como el texto en su elemento de bloque principal. text-align no controla la alineación de los elementos del bloque en sí, solo su contenido en línea.

Ver

texto alineado

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

<style>
    .alnright { text-align: right; }
</style>

— rahul
fuente

55

¿Es un <input type = "button"> un elemento de bloque porque ese no se alinea correctamente?

— Michel

1

Depende. Tengo un párrafo, que es un bloque, dentro de una celda de la tabla (css display: table-cell), y si le doy a ese párrafo un ancho del 100%, comienza a respetar la alineación correcta del texto. Supongo que definir un ancho no siempre es lo mejor.

— Costa

3

Supongo que la propiedad text-alignno está muy bien nombrada si se aplica a botones y controles, así como al texto. Quizás esto debería haber sido llamado content-align?

— Ben

3

Michel: establece el elemento de bloque en bloque en línea, por ejemplo: td input {display: inline-block; }

— shalamos

1

o solo funciona float: right o good old align = "right". wtf?

— Tono Škoda

7

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>

Ver el siguiente violín:

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

— Joysn
fuente

6

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, puede especificar

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

¡En casos con tablas grandes, esto puede ahorrarle mucho margen adicional!

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

— Suite 404 no encontrada
fuente

Genial: la solución más fácil y limpia que vi.

— ncrypticus

2

Cómo colocar elementos de bloque en una `td`celda

Las respuestas proporcionadas hacen un gran trabajo para alinear correctamente el texto en una tdcelda.

Esta podría no ser la solución cuando busca alinear un elemento de bloque como se comenta en la respuesta aceptada. Para lograrlo con un elemento de bloque, he encontrado útil hacer uso de los márgenes;

sintaxis general

selector {
  margin: top right bottom left;
}

justificar a la derecha

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

justificar centro

td {
  margin: auto auto auto auto;
}

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

Alinear al centro

td {
  margin: auto;
}

JS Fiddle ejemplo

Alternativamente, podría hacer que su tdcontenido se muestre inline-blocksi esa es una opción, pero eso puede distorsionar la posición de sus elementos secundarios.

— John Mutuma
fuente