Image et textes centré verticalement

Bonjour à vous tous et merci d'avance de votre aide.

http://www.rememberfactory.be/build.JPG

<img src="PIC/products/book2.png" style="margin-left:30px; float:left;margin-right:5px;" width="144" height="95" />
<div style="width:250px; float:left; margin-top:10px; margin-left:10px; height:75px; ">
  <p align="justify" style="margin-left:0px;">Pages intérieures de la couverture</p>
</div>

Je ne sais pas ce que vous en pendez. Mais même si je suis arrivé à mes fin, je trouve cette réalisation beaucoup hasardeuse de ma part.

De plus je ne suis pas arrivé à centré verticalement le textes dans la DIV.
Je me suis donc retourné vers les tutoriaux de Alsacréations qui ma renvoyé vers ce post

http://forum.alsacreations.com/topic.php?fid=4&tid=1118#p11582

http://www.rememberfactory.be/build2.JPG

<div style="width:400px; float:left; margin-top:10px; margin-left:10px; height:95px;">
<img src="PIC/products/book2.png" width="144" height="95" style="vertical-align:middle"/><span>Reliure de haute qualité avec tranchefile (bandeau fin ornementé, coton ou soie, collé sur la reliure au niveau de la tranche supérieure du Livre Photos) </span>
</div>

Je suis arrivé à ce résultat, où mon textes n'est pas parfaitement centré verticalement. De plus, si le contenue est trop long, il ressort de ma DIV.

Encore merci.

Bonjour,

Un p'tit tuto qui ressence les techniques connues pour centrer des éléments.

Dans ton cas, je pense qu'il te faudra faire appel à un tableau (ou éventuellement à display:table-cell si tu considère le centrage comme un embellissement dont peut se passer IE6).
Modifié par Florent V. (03 Nov 2009 - 14:09)

Bonjour,

Le seul mécanisme fiable de centrage vertical qui soit compatible avec IE6 et IE7 consiste à utiliser un tableau de mise en page. Tu appliques (en CSS) un vertical-align:middle sur ta cellule de tableau, et voilà.

Du coup, quitte à utiliser un tableau de mise en page (pas bien dans l'absolu mais pas le choix dans la pratique), tu peux en profiter pour y placer ton image de gauche. Pour une liste de produits avec visuel et descriptif, tu peux donc avoir un tableau de mise en pages à deux colonnes, avec l'illustration à gauche et le descriptif à droite.

Laurie-Anne a écrit :
(ou éventuellement à display:table-cell si tu considère le centrage comme un embellissement dont peut se passer IE6)

C'est une autre solution qui n'est pas mauvaise. Le centrage n'est en effet pas indispensable. Par contre vu que ça concerne aussi IE7 (seule la version 8 comprend display: table-cell), pas sûr que ça passe.

Merci à vous deux Florent et Laurie-Anne.

J'ai donc choisi d'utilisé un simple tableau.

Avant les CSS c'était pas trés courant, aujourd'hui on ma tellement tromatisé avec "Fini, plus de tableau pour mise-en-page, que du CSS". Que j'en est oublié l'existence des tableau LOL.

<div style="**">
<table width="**" border="**" cellspacing="**" cellpadding="**">
  <tr>
    <td width="**"><img src="**" width="**" height="**" /></td>
    <td valign="middle"><p align="justify" style="margin-left:10px;">**</p></td>
  </tr>
</table>
</div>

Et voici pour qui le souhaite, encore mille fois merci.

Oui mais attend, faut pas déconner non plus: c'est pas parce qu'on utilise un tableau de mise en page qu'il faut se mettre à le barder d'attributs de mise en forme tout à coup!

LES TABLEAUX AUSSI PEUVENT ÊTRE STYLÉS EN CSS.

Ton code, corrigé:

<table class="products"> 
  <tr>
    <td><img src="..." alt="" width="..." height="..." /></td> 
    <td><p>...</p></td>
  </tr>
</table>

Non mais c'est quoi ce manque de rigueur, là? C'est pas parce qu'on a dit que les tableaux ne sont pas à bannir totalement qu'il faut se mettre à pondre du code affreux, et jeter aux orties la séparation du contenu et de la mise en forme, hein.

PS: penser aux attributs alt sur les images.
Modifié par Florent V. (05 Nov 2009 - 10:11)