Imagen central en tabla td en CSS

100

Intenté alinear una imagen con el centro de la tabla td. Funcionó con la configuración de margin-left en un valor específico, pero también aumentó el tamaño de td y eso no es exactamente lo que quería

¿Hay alguna forma eficaz de hacer esto? Usé porcentajes para la altura y el ancho de la mesa.

html css

— Mejor
fuente

pregunta relacionada: stackoverflow.com/questions/8639383/… Además de darle al padre (aquí td) un estilo de alineación de texto: centro, es posible que deba darle al hijo (aquí, img) un estilo de visualización: bloque o pantalla : inline-block

— mathheadinclouds

176

<td align="center">

o vía css, que es el método preferido más ...

<td style="text-align: center;">

— Scott
fuente

23

Nota para OP ... use la segunda opción de Scott ya que 'alinear' no es compatible con HTML5 en el futuro

— isNaN1247

Entonces, ¿cómo podemos superar HTML5?

— Mejor

25

No superas HTML5 ... te adaptas a él. @beardtwizzle .. gracias por agregar eso.

— Scott

1

¿Y si también lo quiero centrado desde arriba?

— Sohaib

11

@SilentPro<td style="text-align: center; vertical-align: middle;">

— Scott

55

Manera simple de hacerlo para html5 en css:

td img{
    display: block;
    margin-left: auto;
    margin-right: auto;

}

Funcionó para mí perfectamente.

— Mohammed Gadiwala
fuente

Funciona perfectamente; <td style = "text-align: center;"> no funciona, <td align = "center"> funciona, pero no es compatible con HTML5

— user2431763

9

Centre un div dentro de td usando margin, el truco consiste en hacer que el ancho del div sea el mismo que el ancho de la imagen.

<td>
    <div style="margin: 0 auto; width: 130px">
          <img src="me.jpg" alt="me" style="width: 130px" />
    </div>
</td>

— Sistemas superiores
fuente

1

@Saike No realmente, <div>los correos electrónicos se eliminan de la mayoría de los correos electrónicos y no se consideran una buena práctica.

— crmpicco

6

Esto solucionó problemas para mí:

<style>
.super-centered {
    position:absolute; 
    width:100%;
    height:100%;
    text-align:center; 
    vertical-align:middle;
    z-index: 9999;
}
</style>

<table class="super-centered"><tr><td style="width:100%;height:100%;" align="center"     valign="middle" > 
<img alt="Loading ..." src="/ALHTheme/themes/html/ALHTheme/images/loading.gif">
</td></tr></table>

— Kheteswar
fuente

esto también solucionó el problema para mí, pero en la etiqueta de imagen, no en la tabla o etiqueta td

— Sumon Bappi

6

<table style="width:100%;">
<tbody ><tr><td align="center">
<img src="axe.JPG" />
</td>
</tr>
</tbody>
</table>

o

td
{
    text-align:center;
}

en el archivo CSS

— oqx
fuente

5

Establezca un valor fijo de su imagen en su css y agregue un auto-margin / padding en la imagen para ...

div.image img {
    width: 100px;
    margin: auto;
}

O establezca el text-alignen el centro ...

td {
    text-align: center;
}

— Michiel
fuente

2

td image 
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

— aulianza
fuente

gran respuesta genérica

— Dan

0

Otra opción es el uso en <th>lugar de <td>. <th>por defecto al centro; <td>predeterminado a la izquierda.

— usuario13731874
fuente

Lo solucioné, pero en el futuro solo use comillas invertidas (`) a cada lado de los elementos HTML para asegurarse de que se muestren.

— Jeremy Caney

-6

Según mi análisis y búsqueda en Internet también, no pude encontrar una manera de centrar la imagen centrada verticalmente usando <div>solo era posible usando <table>porque la tabla proporciona la siguiente propiedad:

valign="middle"

— Kheteswar
fuente

3

No se recomienda esta sugerencia ya que no es compatible con HTML5. Es mejor usar el estilo CSS o la clase con alineación vertical: centro aplicado a la columna o contenedor.

— mbokil