je n'arrive pas à centrer mon image et mon texte dans le contenu Fermé

Question

Bonjour à tous, Je me tire les cheveux depuis plusieurs heures, voir depuis plusieurs jours car je n'arrive pas à mettre du texte à droite de mon image ! Mon image et son texte doivent être centrés dans le contenu Je pense que c'est assez simple mais vu ma nullité je n'y arrive pas. J'ai essayé le float etc mais je n'y arrive pas. Quelqu'un peu m'aider svp . CSS http://www.votre-faire-part.com/test/css/carte-enveloppe.css IMG.impression { display: block; margin-left: auto; margin-right: auto } HTML http://www.votre-faire-part.com/test/carte-enveloppe-blanche-350.htm

Dimension de la carte simple
Format : 14 X 10.5 CM
Grammage : 350 gr

Caractéristique de l'enveloppe
Format : 11.4 x 16.2 cm
Grammage : 120 gr

A savoir que sous cette image et son texte il y aura d'autres images et leur texte (pour éviter l'effet escalier que dois-je faire ?) Help help Garance

Kopros · Answer

Déjà pour les balises p c'est pas prévu de les mettre en page (enfin p'tet que si mais c'est tellement la galère, des fois j'ai l'impression que ça bug) je te conseille de mettre des div à la place.

Sinon t'as mis une balise div qui se ferme, mais pas celle qui ouvre. Mais je pense que c'est une erreur de copier/coller.

Si tu mets un margin auto à un élément, le margin va prendre toute la place qu'il peut. Un autre élément ne peut pas se mettre sur cette place, et va aller en dessous (ou à l'autre bout de la galaxie si on est sous IE6).
La solution c'est d'encastrer des balises. On part de celles qui sont le plus encastrées : l'img et la div avec le texte. Dans l'html elles sont au même niveau. Et vu que l'une doit être à côté de l'autre, il faut leur mettre un float: left à chacune.
Attention avec float : il faut mettre une autre div, qui a comme style clear: both, au même niveau que les float, pour que la div parent prenne de l'espace.

Ces 3 éléments là doivent être centrés, mais on peut pas le faire à cause du float. On les fourre donc dans une div, qui elle va être centrée avec les margin auto.

Enfin cette dernière div doit être dans une autre div encore (ou un autre truc, mais les div c'est la vie ! ^^ ) qui doit avoir une dimension (width) précisée (en général on met 100%).

Voilà, t'as plus qu'à faire le code !

inspiring · Answer

Bonjour, Alors: HTML

Dimension de la carte simple
Format : 14 X 10.5 CM
Grammage : 350 gr

Caractéristique de l'enveloppe
Format : 11.4 x 16.2 cm
Grammage : 120 gr

CSS /* pas de IMG.impression mais .impression ou img.impression -- les majuscules ne servent a rien*/ .stabilizer:after {content:"";display:table; width:100%} .stabilizer.impression { /*suppression du display:block et des margin*/ float:left; } .stabilizer p { margin-top:30px; margin-left:0; } Dans l'idée que les images sont de même dimensions voila voila :)

Je n'arrive pas à centrer mon image et mon texte dans le contenu

2 réponses

Discussions similaires