28220 sujets

CSS et mise en forme, CSS3

[Resolu] Centrer une image (ou autre)

Salut, c'est encore moi !

Encore un petit probleme que je n'arrive pas a resoudre (j'ai passé des heures a parcourir ce forum et d'autres).
Je n'arrive tout simplement pas a centrer une image dans un div. Dans ce div, j'ai un <a><img/></a>. J'ai bien lu le tuto de Alsacréations. Mais le code est généré a l'aide de php et les images sont toutes de taille différentes. Donc je ne peux pas spécifier un width comme il semble nécessaire d'apres le tuto. Il persiste avec un margin-left:auto; et un margin-right:auto; à me la mettre a gauche.
Merci encore de votre aide,
Modifié par juju_bilation (14 Jun 2005 - 16:12)
Salut,

Tu ne peux pas utiliser margin-left/right: auto, si tu ne spécifie pas la largeur de ton image. Smiley cligne
Bon il y a biensur les <center></center> mais c'est pas beau j'en convient Smiley lol . (mais c'est accepté par W3 en transitional il me semble).
Je ne connais pas la solution miracle Smiley confus .
Oui, merci de ta proposition.

Mais en fait, je refais tout le site que j'avais fait n'importe comment à l'epoque et j'aimerais eviter les <center> (je viens juste de les enlever! et je n'ai pas envie d'enlever le jolie petit bouton xhtml 1.1 ... Smiley smile ). De toute maniere, je les remettrais si je n'ai pas le choix.

Si quelqu'un a une idée de génie ...
Modérateur
Resalut,

pour te servir de margin, tu dois ajouter display:block; au style de ton image...

Smiley cligne
Modifié par koala64 (14 Jun 2005 - 11:13)
Slt,

tu veux centrer ton image horiontalement, verticalement ou les deux ?

horizontalement : tu applique text-align:center; à ton div

verticalement : tu fais line-height:/*la hauteur de ton div*/; sur ton div

a+
Modérateur
SirWam a écrit :

horizontalement : tu applique text-align:center; à ton div

euh çà, çà ne marche pas avec l'image si mes souvenirs sont bons... Smiley cligne

Pour line-height ok mais en combinant avec vertical-align...

Sinon dès lors que tu as mis display:block; sur ton image, tu peux aussi utiliser la technique des marges négatives pour le centrage vertical...
Slt,

une image est une balise de type inline, donc text-align:centr; agit bien dessus.

Est ce ceci qui est recherché ?

Le css :
div{
        width:300px;
        height:100px;
        margin:auto;
        margin-top:200px;
        border:1px dotted black;
        line-height:100px;
        text-align:center;
        }

Modifié par SirWam (14 Jun 2005 - 12:08)
Bonjour,
le "text: align;" marchera sous iE, car il prend tout en texte, mais pas avec Firefox... pour celà, rien de plus simple : tu insères tes images dans des "<p></p>", et elles sont donc dans un paragraphe (texte) géré par "text-algin: center;" pour les deux navigateurs. (Images dans "<p>" : procédé utilisé par le W3C pour insérer l'icone...).
Modifié par Macpom (14 Jun 2005 - 11:57)
Modérateur
Macpom a écrit :
le "text: align;" marchera sous iE

Non çà marche pas!

Macpom a écrit :
elles sont donc dans un paragraphe (texte) géré par "text-algin: center;" pour les deux navigateurs

Non c'est pas vrai!

C'est text-align tu veux dire?! Smiley lol

Bon, en fait, j'avais déjà eu un problème avec "text-align" sur une image mais c'est parce que je souhaitais mettre la propriété directement sur les styles de la balise img ce qui ne fonctionnait pas. Smiley smile
Merci a tous pour toutes ces reponses ! Je teste tout cas et je reviens !
Merci Sirwam ...Une page d'exemple, je n'en demandais pas tant ! Je teste tout de suite mais comme je l'ai dis, je ne connais pas la largeur de mon image (vu que les images sont differentes, et prises dans une bdd).

Voila encore merci ... Smiley confused
Sujet clos
Aller à