28120 sujets

CSS et mise en forme, CSS3

Centrer verticalement une image dans un conteneur plus petit

Bonjour à tous,

J'aimerai
a écrit :
Centrer verticalement une image de taille variable dans un conteneur de hauteur fixe
. Je "cite" car je me suis inspiré de http://www.alsacreations.com/xmedia/tuto/exemples/vertical/demos.html#cv_image

Mais j'aimerai pouvoir le faire dans le cas où l'image est plus haute que le conteneur, et "cacher" le reste de l'image (en haut et en bas) par un 
overflow: hidden;
sur le conteneur.
Problème, cela ne fonctionne pas, l'image n'est pas centrée verticalement.

Existe-t-il une solution autre qu'avec un tableau ?

<!DOCTYPE HTML>
<html>
<head>
<style>
p { 
  height: 200px;
  width: 400px;
  line-height: 200px;
  text-align: center;
  background: #333;
  overflow: hidden; }
img { 
  vertical-align: middle;
}
</style>
</head>
<body>
<p><img src="http://formations.alsacreations.fr/img/pictos/formations.png"></p>
</body>
</html>


Merci par avance Smiley smile
Bonjour bonjour,

Alors je viens de tester et j'y suis arrivé grâce à la propriété table-layout. Voici un petit exemple;

L'html :
  <div id="container">
    <div id="main" role="main">
      <img src="http://www.sudoku-gratuit.fr/illusion-optique/1image-illusion-optique18.jpg" />
    </div>
  </div>

Le CSS :
#container {
  display: table;
  height: 600px;
  table-layout: fixed;
}
#main {
  display: table-cell;
  vertical-align: middle;
  max-width: 100px;
  max-height: 100px;
  overflow: hidden;
}


En espérant avoir pu t'aider.

Edit: un petit complément d'information, table-layout permet de d'inverser le comportement par défaut des tableaux. En effet à la base c'est le contenu qui va déterminer la taille des cellules d'un tableau, avec cette propriété c'est l'inverse. Super pratique et peu connu (je l'ai apprise la semaine dernière grâce à mon super sensei).
Modifié par Gili (29 Feb 2012 - 19:10)
Sujet clos
Aller à