Alignement vertical d’une image dans un bloc div en CSS

Plusieurs techniques existent sur le web.

Quand on connait la hauteur des images

Ou quand on ne les connait pas, mais là, il faut s’accrocher

 

Quand on n’utilise pas Internet Explorer, on peut utiliser la proprieté display: table-cell; permettant alors d’utiliser la proprieté vertical-align: middle; propre aux cellules des tableaux. Mais ça ne marche pas sous IE <7 

On peut enfin utiliser les tableaux. Personne n’en parle comme d’un hack css, pourtant, avec cette technique, le code est compréhensible, pas si lourd que ça… Les pros du CSS seraient ils des ultras ?


  <html>
  <head>
    <style>   
      div {
        border: 1px solid black;
        background: #DDD;
        width: 200px;
        height: 154px;
        text-align: center;
        margin: 20px;
        float: left;    
      }     
      table {
        height:100%;
        width:100%;
        vertical-align: middle;
        text-align: center;
      }  
    </style>
  </head>
  <body>
    <div><table><tr><td><img src=image1.jpg></td></tr></table></div>
    <div><table><tr><td><img src=image2.jpg></td></tr></table></div>
    <div><table><tr><td><img src=image3.jpg></td></tr></table></div>
    <div><table><tr><td><img src=image4.jpg></td></tr></table></div>
    <div><table><tr><td><img src=image5.jpg></td></tr></table></div>
    <div><table><tr><td><img src=image6.jpg></td></tr></table></div>
    <div><table><tr><td><img src=image7.jpg></td></tr></table></div>
    <div><table><tr><td><img src=image8.jpg></td></tr></table></div>
    <div><table><tr><td><img src=image9.jpg></td></tr></table></div>
    <div><table><tr><td><img src=image10.jpg></td></tr></table></div>  
 </body>
</html>


Et les exemples en lien : avant le centrage et après le centrage

Dans la même catégorie :

3 commentaires

  1. Tu as écrit, je cite:"Commençons super simple, mais il faut bien commencer par quelquechose !"… Heureusement que tu n’as pas commencé d’emblée avec qqch de compliqué! Personnellement, je n’ai rien compris…Que faut-il que je fasse?
    A. Je pleure
    B. J’achète l’intégrale de "l’ordinateur pour les vraiment très nuls"
    C. J’abandonne et je ferme mon ordi

  2. Suite à votre explication sur la recherche « Accent insensitive » sur Access
    SELECT * from table WHERE champ4 like ‘%r[eéèêë][uúùûü][nñ][iìíîï][oóòôö]n%‘
    Et votre résultat avec une recherché sur « réunion commerciale » j’aimerai savoir ou vous placez l’argument de recherche pour mixer la recherche insensitive avec une variable représentant la recherche à effectuer.
    Merci de votre réponse.
    ACN

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *