Centra l'immagine nella tabella td in CSS

100

Ho provato ad allineare un'immagine al centro del tavolo td. Ha funzionato impostando il margine sinistro su un valore specifico, ma ha anche aumentato la dimensione di td e non è esattamente quello che volevo

Esistono modi efficaci per farlo? Ho usato le percentuali per l'altezza e la larghezza del tavolo.

html css

— Migliore
fonte

domanda correlata: stackoverflow.com/questions/8639383/… Oltre a dare al genitore (qui td) uno stile di text-align: center, potresti dover dare al bambino (qui, img) uno stile di display: block o display : inline-block

— mathheadinclouds

176

<td align="center">

o tramite css, che è ancora il metodo preferito ...

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

— Scott
fonte

23

Nota per OP ... usa la seconda opzione di Scott poiché "align" non è supportato in HTML5 in futuro

— isNaN1247

Allora come possiamo superare HTML5?

— migliore

25

Non superi HTML5 .. ti adatti ad esso. @beardtwizzle .. grazie per averlo aggiunto.

— Scott

1

E se lo volessi centrato anche dall'alto

— Sohaib

11

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

— Scott

55

Modo semplice per farlo per html5 in css:

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

}

Ha funzionato perfettamente per me.

— Mohammed Gadiwala
fonte

Funziona perfettamente; <td style = "text-align: center;"> non funziona, <td align = "center"> funziona, ma non è supportato in HTML5

— user2431763

9

Centra un div all'interno di td usando margin, il trucco è rendere la larghezza del div uguale alla larghezza dell'immagine.

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

— Migliori sistemi
fonte

1

@Saike Non proprio, le <div>email vengono eliminate dalla maggior parte delle email e non sono considerate una buona pratica.

— crmpicco

6

Questo ha risolto i problemi per me:

<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
fonte

anche questo ha risolto il problema per me ma nel tag immagine, non nella tabella o nel tag 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;
}

nel file CSS

— oqx
fonte

5

Imposta un con fisso della tua immagine nel tuo css e aggiungi un auto-margin / padding sull'immagine a ...

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

Oppure imposta text-alignal centro ...

td {
    text-align: center;
}

— Michiel
fonte

2

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

— aulianza
fonte

ottima risposta generica

— Dan

0

Un'altra opzione è l'uso al <th>posto di <td>. <th>il valore predefinito è center; <td>il valore predefinito è sinistra.

— user13731874
fonte

L'ho risolto per te, ma in futuro usa semplicemente i backtick (`) su entrambi i lati degli elementi HTML per assicurarti che vengano visualizzati.

— Jeremy Caney

-6

Come da mia analisi e ricerca anche su Internet, non sono riuscito a trovare un modo per centrare l'immagine centrata verticalmente utilizzando <div>è stato possibile solo utilizzando <table>perché la tabella fornisce la seguente proprietà:

valign="middle"

— Kheteswar
fonte

3

Questo suggerimento non è consigliato poiché non è supportato in HTML5. Meglio usare lo stile CSS o la classe con allineamento verticale: centro applicato alla colonna o al contenitore.

— mbokil