Comment centrer verticalement image à l’intérieur de la div

Question

J’ai un balisage comme ceci :

La div est plus élevée qu’img :

J’ai besoin de l’image d’être au milieu de la balise div (ont la même quantité d’espace blanc au-dessus et en dessous).

J’ai essayé et ça ne marche pas :

Answer 1

si votre image est purement décoratif, il peut être un plus sémantique solution afin de l'utiliser comme image de fond d'écran. Ensuite, vous pouvez spécifier la position de l'arrière-plan

background-position: center center;

Si elle n'est pas décoratif et constituent des informations de la balise img est justifiée. Ce que vous devez faire dans ce cas est le style de la div contenant avec les propriétés suivantes:

div{
    display: table-cell; vertical-align: middle 
}

Lire plus sur cette technique ici. Pas de travail sur IE6/7 (fonctionne sur IE8).

Answer 2

Une autre façon est de mettre votre hauteur de ligne dans le div conteneur et aligner votre image pour que l’utilisation vertical-align : middle.

HTML :

CSS :

C’est sur le dessus de ma tête. Mais j’ai utilisé cette avant - elle devrait faire l’affaire. Travaux pour les navigateurs plus anciens aussi bien.

Answer 3

Disons que vous voulez mettre l’image (40px X 40px) sur le centre (horizontal et vertical) de la classe div = « boîte ». Si vous avez le code html suivant :

Ce que vous avez à faire, c’est appliquer le CSS :

Votre div peut même changer sa taille, l’image sera toujours au centre de celui-ci.

Answer 4

Il s’agit d’une solution que j’ai utilisé avant d’accomplir un centrage vertical en CSS. Cela fonctionne dans tous les navigateurs modernes.

http://www.jakpsatweb.cz/CSS/CSS-vertical-Center-solution.html

Extrait :

(Styles intralignes pour fins de démonstration)

Answer 5

Une autre option consiste à définir sur le , puis définissez``