HTML/CSS : Centrage tableau bug

HTML/CSS : Centrage tableau bug - HTML/CSS - Programmation

Marsh Posté le 02-11-2011 à 11:46:14    

Bonjour à tous,
 
Une question assez simple surement, mais je débute.  
 
J'ai un tableau, avec dans chaque case une image (à gauche) + un texte. Mon but est de centrer ce texte verticalement r/r à l'image à gauche, ou au moins à la case. J'ai testé le valign="middle" et vertical-align: middle mais ca ne sert à rien.  
 
Un avis ? C'est un site commercial assez simple, unipage.  
 
Mon code :

Code :
  1. .tablecenter
  2.  {
  3.   background-color: rgb(235,235,235);
  4.   margin-left: auto; margin-right: auto;
  5.   width: 85%;
  6.  }
  7.  .indication
  8.  {
  9.   text-align: center;
  10.   font-size: small;
  11.   font-style: italic;
  12.   color: rgb(100,100,100);
  13.  }
  14.  .contacts
  15.  {
  16.   width: 70%;
  17.  }
  18.  .icone
  19.  {
  20.   float: left;
  21.  }


 
 

Code :
  1. <tr>
  2.   <td><img src="tableau.png" alt="Impression sur toile, différents formats, Pêle-Mêle ou photo unique" class="icone" /> <div class="inter"><abbr title="Impression sur toile, différents formats, Pêle-Mêle ou photo unique">Tableau</abbr> <br /> <em> à partir de 60€</em></div></td>
  3.   <td><img src="plaquebox.png" alt="Plaque métallique, avec photo et les informations de votre choix" class="icone" /><div class="inter"><abbr title="Plaque métallique, avec photo et les informations de votre choix">Plaque de Box</abbr> <br /><em> à partir de 60€</em></div> </td>
  4.  </tr>


 
Merci à tous


Message édité par C501 le 02-11-2011 à 11:46:43

---------------
Sleep is overrated...
Reply

Marsh Posté le 02-11-2011 à 11:46:14   

Reply

Marsh Posté le 02-11-2011 à 12:14:37    

Comment est défini le CSS de la classe inter ?
 
Pourquoi utiliser la balise abbr pour autre chose que des abréviations ?
 
Peut-être faudrait-il un span au lieu d'un div.

Reply

Marsh Posté le 02-11-2011 à 12:18:41    

C'est une tentative desépérée pour recentrer. Ca a marché un long moment, ca n'est plus le cas.  
 

Code :
  1. .inter
  2.  {
  3.   padding-top: 25%;
  4.  }


 
 
Pour le abbr, l'idée est d'activer une description de l'objet de façon plus originale. C'est peu habituel je m'en doute.
 
Le div ne me sert qu'à activer le inter.  shame on me je sais [:c501]  


---------------
Sleep is overrated...
Reply

Marsh Posté le 02-11-2011 à 12:24:35    

Non, pas de raison d'avoir honte. C'est la méthode habituelle d'encapsuler des trucs dans des div ou des span pour obtenir le formatage voulu. Et puis ce qui compte, c'est le résultat.
 
Là, je ne sais pas très bien. Peut-être que le milieu devrait se faire par rapport au td plutôt que par rapport au div ou au span, ou bien il faudrait que le div ou le span ait la hauteur correspondante au td, ou encore il faudrait que le div ou span contienne l'image pour qu'il ait une hauteur suffisante. Pour le savoir, on pourrait tester en mettant un background de couleur.

Reply

Marsh Posté le 02-11-2011 à 12:37:32    

Avec un background dans .inter, la case est entièrement remplie.

 

Avec vertical-align: middle; le texte s'accole en haut à droite des images.


Message édité par C501 le 02-11-2011 à 12:39:12

---------------
Sleep is overrated...
Reply

Marsh Posté le 03-11-2011 à 13:58:16    

tu as essayé en définissant une hauteur et une largeur à ta div.inter?
il ne peut pas se centrer si son conteneur n'as pas de taille fixe.
utiliser un div ou un span en display:block; revient à la même chose.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed