Discussion :

[Poulpynette]

Bonjour,

Après maintes recherches, je sèche sur un problème qui me paraît pourtant simple.

Je souhaite centrer verticalement un texte et une image de la façon suivante (dans un div par exemple, mais peu importe le conteneur) : cf pièce jointe

J'ai testé la méthode suivante qui consiste à mettre l'image et le texte dans le même conteneur (un div par exemple) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.conteneur span {
	display: inline-block;
	vertical-align: middle;
}
.conteneur img {
	display: inline-block;
	vertical-align: middle;
}

Cette méthode fonctionne très bien. Mais dans mon cas j'ai besoin d'un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

float:right;

sur l'image pour qu'elle s'affiche complètement à droite, et là ça ne marche plus. J'ai testé plein de possibilités (mettre 2 div, jouer sur la largeur, etc ...) mais je ne m'en sors pas.

Si quelqu'un connaît une solution simple ^^

[GihefBey]

Bonjour,

Les hauteurs ne semblant pas être définies, fais-ça dans un tableau.
Avec 2 ou 3 cellules (gauche-milieu-droite).
Le vertical-align y fonctionne et pas besoin de float.

-

[Poulpynette]

Un tableau c'est ce que je veux éviter ... Surtout juste pour un mot et une image -_-

La hauteur est fixée à 50 pixels sinon. Et la largeur est variable : le conteneur occupe l'espace disponible.

[Erwan31]

Bonjour Poulpynette,
le float:right fait passer la valeur du dsiplay à block de manière transparente, il est donc normal que ça ne fonctionne plus avec cette méthode.

Tu as une autre méthode de centrage vertical connue (en supposant que ton image fasse 30px de haut):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.conteneur {position:relative; height:50px}
 
.conteneur img { 
position:absolute;
height:30px;
top:50%;
right:0;
margin-top: -15px
}

[Poulpynette]

Merci pour cette solution déjà plus adaptée à mon problème

J'ai simplement dû enlever le "top:50%" qui centrait mon image dans le navigateur et non dans le conteneur.
Et connaissant la hauteur du conteneur et la hauteur de l'image, j'ai adapté le margin-top.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.conteneur {position:relative; height:50px}
 
.conteneur img { 
  position: absolute;
  height: 32px;
  right: 0;
  margin-top: 9px;
}

Je vais voir si je peux en faire autant pour le span.

[Erwan31]

Je vais voir si je peux en faire autant pour le span.

Hello,
si la hauteur reste, pourquoi chercher une technique de centrage? Il te suffit d'un padding-top qui centre ton image non?
En principe ça devrait se centrer avec le position:relative sur le conteneur.