Centrer verticalement une image dans un CSS

Bonjour,

J'insère dynamiquement (par javascript) une image dans un css
défini par div, et je ne parviens pas à la centrer verticalement.
En gros ça fait ça :

<div id="monImg">
<center>
<img src='images/1/email.gif' align='center' alt='E-Mail' border='0'>
</center>
</div>

Une idée ?

Salut ckoica et bienvenue ici

Je te fait le topo habituel pour les nouveaux : voudrais-tu bien relire les Règles du forum, notamment le point qui explique comment afficher les exemples et codes correctement sur le forum ? Merci d'avance de modifier ton message dans ce sens

Ensuite, comme tu t'en doutes, tu poses une question qui revient souvent sur le forum. As-tu pensé à faire une recherche avant de créer ton sujet ? As-tu pensé à consulter la FAQ pour voir si ta question s'y trouvait (elle s'y trouve ) ?

Enfin, peux-tu donner plus de précisions : ton image doit-elle se centrer dans le div "monImg" ? Ou est-ce l'ensemble qui doit se centrer dans un autre conteneur ? (dans ce cas, quel est l'intérêt du div "monImg")

Et pour finir : quelle méthode as-tu testé pour centrer verticalement ton image (tu n'affiches pas tes CSS donc on ne peut pas savoir ce que tu as testé ni où tu en es)

a écrit :
J'insère dynamiquement (par javascript) une image dans un css

et ton titre :

a écrit :
Centrer verticalement une image dans un CSS

Tes termes ne sont pas clairs.
On ne met pas d'images ou de balises HTML dans du CSS. Les styles CSS ne sont que des instructions destinées à mettre en forme les éléments de la page HTML.
Je crois que tu confonds certaines choses

Bonne chance.
Modifié par Raphael (06 May 2005 - 12:57)

Le plus simple serait peut-être d'utiliser ton image comme image de fond de ton div; tu utilises alors ta propriété CSS

#monImg{
    background-repeat: no-repeat;
    background-position: center center;
    backgorund-image: url(mages/1/email.gif);
    }

(je ne suis pas sûr de la nécessité de doubler le center pour avoir le centrage horizontal et vertical).

L'ajout de propriétés à ta feuille CSS peut se faire en JavaScript.
Modifié par Gilles (06 May 2005 - 12:56)

Gilles a écrit :

#monImg{
    background-repeat: no-repeat;
    background-position: center center;
    backgorund-image: url(mages/1/email.gif);
    }

Attention à la faute de frappe Et il faudra spécifier des dimensions au bloc div, ce qui donnerait :

#monImg{
    width: ...;
    height: ...;
    background: url(mages/1/email.gif) center no-repeat;
    }

:)

Merci pour les réponses.

@Raphael

Désolé de n'avoir pas respecté l'usage, mais c'est un peu nouveau,
et bien que je sois familier des forums, je n'ai pas encore l'habitude
de celui-ci.

Raphael a écrit :
Je te fait le topo habituel pour les nouveaux : voudrais-tu bien relire les Règles du forum, notamment le point qui explique comment afficher les exemples et codes correctement sur le forum ?

Pas de soucis dès que je saurais faire. Un petit lien pour me dire ou c'est ?

Raphael a écrit :
As-tu pensé à faire une recherche avant de créer ton sujet ?

Oui, mais j'ai peut-être mal posé la question.

Pour le reste, l'image devra être centrée dans le div monImg,
dont les dimensions sont plus grandes que l'image elle-même.
Je posterais le code euh ..., disons, quand je saurais poster correctement
le code (voir plus haut ). <- à moins que ce soit la balise [code] ?


@Gilles

Merci pour ta réponse, j'essaye encore car ça ne donne rien
pour le moment, mais ça me parait intéressant.


Merci à vous de répondre si vite.
Modifié par ckoica (06 May 2005 - 13:37)

a écrit :
Pas de soucis dès que je saurais faire. Un petit lien pour me dire ou c'est ?

Bah disons que normallement, les Règles (et le lien) t'ont été envoyées par mail lors de ton inscription, et tu as certifié les avoir lues en t'inscrivant
Bon sinon, le lien est "Aide/Règle", dans le menu du forum (le menu vertical en haut)

a écrit :
disons, quand je saurais poster correctement
le code (voir plus haut lol ). <- à moins que ce soit la balise code ?

Là je peux te renvoyer à la FAQ (toujours dans le menu du forum), qui t'expliquera comment faire (pour info, il s'agit du bouton "code") que tu trouves en bas lorsque tu écris un message

Bon je reprends, car je crois que je me suis emmêlé les pinceaux.

Voilà ce que j'ai dans ma page html :

	
<div id="monEmail"></div>

Le CSS qui va avec (dans un fichier externe) :

#monEmail {
    position:absolute;
    top:0px;
    right:0px;
    visibility:hidden;
    width:250px;
    height:60px;
    background-color: #CCCCCC;
}

Le div "monEmail" est alimenté dynamiquement en javascript (dans un fichier externe) :

prefMail="<a href='mailto:"
suffMail="?subject=Vu sur Doranco&amp;body=Votre message ici'><center><img src='images/1/email.gif' align='center' width='36' length='36' alt='E-Mail' border='0'></center></a>"

...

document.getElementById('monEmail').innerHTML  = prefMail + varMail + suffMail;
// varMail étant une variable contenant un email généré dynamiquement,
//   et qui vient s'intercaler pour que 'mailto:' soit correct. 

Le but : Afficher dans un div un peu plus grand, juste une icone email,
centrée horizontalement et verticalement, sur laquelle il suffit de cliquer
pour ouvrir un client mail pré-rempli.

Ca marche, mais pas de centrage vertical.



PS : j'essaye de charger un avatar 100x75, jpg, 3ko, il me dit que
c'est fait, mais je ne vois toujours rien. Y a-t-il une raison ?

bonjour,

en ce qui concerne le centrage vertical, voici un lien ou tu pourra peut etre trouver ton bonheur

amicalement,