Aligner une image au milieu de <td></td>

J'ai le code suivant:

<td>
<img src="some_image_url.png" class="png" />
<img src="another_image_url.jpg" />
</td>

L' .css pour la class="png" est:

.png {
    position:absolute;
}

Comment puis-je faire de l'Vendu image doit être affichée dans le milieu, comme l'autre de l'image est aligné?

Grâce.

EDIT: Voici la .css pour la td:

.something td {
    padding: 7px;
    width: 20%;
    text-align: center;
    vertical-align: top;
}
  • Sur quel navigateur avez-vous exécuter ?
  • J'ai réussi à trier les choses, l'ajout d'un DIV entre la TD, donc maintenant c'est ok 😉 Merci pour votre effort copain. P. S. je courais sur IE.
InformationsquelleAutor Nikola Nastevski | 2012-01-17
  1. 0

    essayer comme ça:

    td
{
  position: relative; /* if it's IE */
  /* position: fixed;  if it's mozila */
}
    .png , .jpg
    {
        position:absolute;
        left:50%;
        top:50%;
    }
    .png
        {
            margin-top: <put here half of the height of png>
            margin-left: <put here half of the width of png>
        }

    ajouter une classe jpg pour les images jpg

    Mise à JOUR: j'ai édité de nouveau, cela fonctionne pour moi ...

    assurez-vous que votre td est assez grand

    • Nope, pas de travail, déjà essayé ça 🙁 Il le rend encore plus proche de la bordure gauche...
    • désolé, essayez-le maintenant
    • Toujours rien, d'obtenir les images de la table, maintenant...
    • J'ai édité le premier post, a ajouté le .css pour le td...
    • Mais sont-ils centrés ? essayez de supprimer le left:50%; top:50%;
    • Toujours rien 🙁
    • Dans mon code, si je change la position:absolute; position:relative; il alignes les deux images dans le centre, mais maintenant, la .le png n'est pas sur le .jpg, ils sont côte à côte...
    • ce qui se passe si les ajouter à gauche: -<quelque chose>; pour le droit à l'image ?
    • Il ne se passe rien 🙂 Très étrange, je n'ai aucune idée pourquoi le .png image n'est pas l'alignement dans le milieu comme les autres .jpg image n'...
    • Toujours rien, même avec votre edit, j'en ai besoin .png être absolue, et .jpg être relative, othervise l' .png de ne pas être plus de la .jpg...

    InformationsquelleAutor A.B.Cade
  2. 1

    Mettre la table du texte aligner au centre

    • Il est déjà mis, comme vous pouvez le voir de l'autre image qui est déjà aligné dans le milieu...
    • J'ai édité le premier post, a ajouté le .css pour le td...
    • Nope, même la table de concordance de l'ensemble de text-align:center; ne fonctionne pas...
    InformationsquelleAutor Bilal Kathrada
  3. 0

    désolé de n'avoir répondu plus tôt, j'ai une solution:
    (Je n'ai pas assez de temps, plus tard, je vais améliorer ma réponse)

    La absoluted images ne sont pas dans le même flux que la valeur par défaut des images en ligne, mais vous pouvez toujours utiliser "text-align:center'

    Il suffit de faire l'inverse, au lieu de mettre l'affichage absolue à l'class="png", donnez-lui de position:relative...
    Et maintenant donner la position absolue de l'img de la-bas:

    <style type="text/css">    
.png {position:relative; z-index:10}
.bottom {position:absolute; z-index:0; left:0; top:0 }
</style>

<table>
<tr>
   <td style=" text-align:center">
     <img src="some_image_url.png" class="png" />
     <img src="another_image_url.jpg" class="bottom" />
   </td>
</tr>
</table>

    De cette façon, vous aurez un automatique de l'image centrée sur le dessus de l'autre.
    N'oubliez pas que si vous utiliser position:absolute; vous DEVEZ définir haut ou le bas, ou vers la gauche ou la droite. Dans les navigateurs comme IE si vous ne spécifiez pas au moins en haut à gauche, il va rendre dans la méthode IE (cassé).

    (dans mon navigateur, il est à travailler, je ne sais pas pourquoi le violon ne montrent pas la voie que je veux, merci de le tester et me dire si c'est correct)

    Par la manière, l'ajout d'un div comme vous l'avez fait est la meilleure solution de l'OMI.

    InformationsquelleAutor Ricardo Castañeda