Centrer l'image dans le tableau td en CSS

Question

J'ai essayé d'aligner une image au centre du tableau td. Cela a fonctionné en définissant une valeur spécifique pour margin-left, mais cela a également augmenté la taille de td, ce qui n'est pas exactement ce que je voulais.

Existe-t-il des moyens efficaces de le faire ? J'ai utilisé des pourcentages pour la hauteur et la largeur de la table.

Answer 1

<td align="center">

ou via css, qui est la méthode préférée de nos jours...

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

Answer 2

Centrer un div à l'intérieur td en utilisant margin le truc est de faire en sorte que le div la même largeur que celle de l'image.

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

Answer 3

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

ou

td
{
    text-align:center;
}

dans le fichier CSS

Answer 4

Cela a réglé les problèmes pour moi :

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

Answer 5

Définissez une valeur fixe pour votre image dans votre css et ajoutez une balise auto -marge/pagination sur l'image pour...

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

Ou bien vous définissez le text-align au centre...

td {
    text-align: center;
}