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

Imagen central en tabla td en CSS

Respuestas: