Centrer l'image dans la table td en CSS

100

J'ai essayé d'aligner une image au centre de la table td. Cela fonctionnait avec la définition de la marge gauche à une valeur spécifique, mais cela augmentait également la taille de td et ce 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 l'esprit de la table.

html css

— Meilleur
source

question connexe: stackoverflow.com/questions/8639383/… En plus de donner au parent (ici td) un style text-align: center, vous devrez peut-être donner à l'enfant (ici, img) un style d'affichage: block ou display : inline-block

— mathheadinclouds

176

<td align="center">

ou via css, qui est désormais la méthode préférée ...

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

— Scott
source

23

Remarque à l'OP ... utilisez la deuxième option de Scott car 'align' n'est pas pris en charge dans HTML5 à l'avenir

— isNaN1247

Alors, comment pouvons-nous surmonter HTML5?

— Meilleur

25

Vous ne surmontez pas le HTML5 .. vous vous y adaptez. @beardtwizzle .. merci d'avoir ajouté cela.

— Scott

1

Que faire si je veux qu'il soit centré à partir du haut aussi

— Sohaib

11

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

— Scott

55

Un moyen simple de le faire pour html5 en css:

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

}

A parfaitement fonctionné pour moi.

— Mohammed Gadiwala
source

Cela fonctionne parfaitement; <td style = "text-align: center;"> ne fonctionne pas, <td align = "center"> fonctionne, mais n'est pas pris en charge dans HTML5

— user2431763

9

Centrez un div à l'intérieur de td en utilisant margin, l'astuce consiste à rendre la largeur div identique à la largeur de l'image.

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

— Top systèmes
source

1

@Saike Pas vraiment, les <div>s sont dépouillés de la plupart des e-mails et ne sont pas considérés comme une bonne pratique.

— crmpicco

6

Cela a résolu des 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>

— Kheteswar
source

cela a également résolu le problème pour moi, mais dans la balise d'image, pas dans la table ou la balise td

— Sumon Bappi

6

<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

— oqx
source

5

Définissez un avec fixe de votre image dans votre css et ajoutez un auto-margin / padding sur l'image pour ...

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

Ou définissez le text-alignpour centrer ...

td {
    text-align: center;
}

— Michiel
source

2

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

— aulianza
source

grande réponse générique

— Dan

0

Une autre option est l'utilisation à la <th>place de <td>. <th>par défaut au centre; <td>par défaut à gauche.

— utilisateur13731874
source

J'ai corrigé cela pour vous, mais à l'avenir, utilisez simplement des contre-indications (`) de chaque côté des éléments HTML pour vous assurer qu'ils sont affichés.

— Jeremy Caney

-6

Selon mon analyse et ma recherche sur Internet également, je n'ai pas trouvé de moyen de centrer l'image verticalement centrée en utilisant <div>uniquement <table>parce que le tableau fournit la propriété suivante:

valign="middle"

— Kheteswar
source

3

Cette suggestion n'est pas conseillée car elle n'est pas prise en charge en HTML5. Mieux vaut utiliser le style CSS ou la classe avec vertical-align: middle appliqué à la colonne ou au conteneur.

— mbokil