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.

[Poulpynette]

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.

Exact, pour l'image :
- soit je lui applique "position: absolute;" en réglant le "top" ou "padding-top" et le "right"
- soit je lui applique un "float: right" avec un "padding-top"

Plus clairement :

Code :

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

1
2
3
4
5
.conteneur img { 
  position: absolute;
  right: 0;
  margin-top: 9px; /*(ou padding-top ou top)*/
}

ou

Code :

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

1
2
3
4
.conteneur img { 
  float: right;
  padding-top: 9px;
}

Ces deux codes fonctionnent très bien.

Là où je coince, c'est pour mon span qui se trouve à gauche. Je suis en train de tester, mais je commence à pédaler

Le souci que j'ai avec le CSS, c'est que plus je teste, moins j'y vois clair et moins je raisonne. Donc faut pardonner mes étourderies

Edit : solution de facilité : comme la hauteur du conteneur et celle de l'image sont fixées, on peut fixer celle de la police (il n'y a qu'un seul mot dans le span) et fixer le top comme pour l'image, en position absolute.

J'aurais aimé savoir s'il existait une solution plus générique permettant de centrer verticalement mon span.

[Macmillenium]

Bonjour,

Là où je coince, c'est pour mon span qui se trouve à gauche. Je suis en train de tester, mais je commence à pédaler

La même chose : un float:right; pour l'img et un float:left; pour le span

[Poulpynette]

Eh non j'ai essayé, sans succès ... Un float: left ne m'aide pas à centrer verticalement ...

[Erwan31]

Faudrait savoir Poulpynette... On a évoqué toutes les solutions de centrage possibles qui restent simples.
Pourquoi n'utilisent tu pas la même technique en absolute pour le span de gauche à ce moment là?

[Macmillenium]

Eh non j'ai essayé, sans succès ... Un float: left ne m'aide pas à centrer verticalement ...

Code css :

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

1
2
3
4
5
 
.conteneur span { 
  float: left;
  padding-top: 9px;
}

La même chose que l'image

[Poulpynette]

J'ai dû mal m'exprimer.

Edit : solution de facilité : comme la hauteur du conteneur et celle de l'image sont fixées, on peut fixer celle de la police (il n'y a qu'un seul mot dans le span) et fixer le top comme pour l'image, en position absolute.

J'aurais aimé savoir s'il existait une solution plus générique permettant de centrer verticalement mon span.

En gros, oui, je peux utiliser la même méthode que pour l'image sur mon span. A condition de fixer une taille de police en pixels (si je ne me trompe pas). Et c'est ce que j'ai fait.

Ce que je souhaitais savoir, c'est s'il existait une solution plus générique pour centrer verticalement un span (quand on ne connaît pas la hauteur du contenu par exemple).
Hormis ça, mon problème est résolu, à condition de tout fixer ^^

[Poulpynette]

Code css :

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

1
2
3
4
5
 
.conteneur span { 
  float: left;
  padding-top: 9px;
}

La même chose que l'image

Désolée pour le flood

Macmillenium, l'image j'en connais la hauteur et c'est ce qui me facilite la tâche.
Un span avec du texte, on n'en connaît pas toujours la hauteur.
Si on connaît la hauteur du span, oui ça marche, je suis d'accord avec toi

[Erwan31]

Ce que je souhaitais savoir, c'est s'il existait une solution plus générique pour centrer verticalement un span (quand on ne connaît pas la hauteur du contenu par exemple).

Il n'existe pas vraiment de solution générique, la méthode à choisir dépendra tout simplement du cas de figure mais la méthode la plus intéressante reste celle à base de display:inline:block / -moz-inline-stack (FF2) et vertical-align + correctif sur IE.
EDIT Tu aurais pu tenter de passer ton image AVANT dans le code et de centrer ton span via cette méthode je pense.

[Poulpynette]

Ok merci d'avoir pris du temps pour examiner mon souci et me répondre.

C'est un problème récurrent d'après ce que j'ai vu en parcourant les forums et les tutoriaux.

Si moi-même je trouve d'autre pistes intéressantes pour des cas plus généraux, je vous en ferai part.

Erwan31 pour ton dernier edit, j'essaierai aussi merci

[Erwan31]

Si moi-même je trouve d'autre pistes intéressantes pour des cas plus généraux, je vous en ferai part.

J'en doute (si on fait exception du centrage via position:relative à la pace de absolute), ou alors ça ne correspondra qu'à du bricolage.
Pour info je m'étais déjà penché dessus en faisant des recherches approfondies mais je n'étais parvenu qu'à une méthode un peu acrobatique à base de font-size et vertical-align, mais ça reste du bricolage

[Poulpynette]

T'inquiète, j'aime pas le bricolage et si je dois en arriver là, ce n'est pas ce que je vous proposerai