28172 sujets

CSS et mise en forme, CSS3

Centrer un texte verticalement sur une image

Bonsoir,

Je bute actuellement sur un problème de CSS. J'ai cherché sur Google, mais je n'ai trouvé aucune solution concluante.

J'ai cela au niveau du XHTML :

<div class="cadre-creations">
<h2>Mon Titre</h2>
<img src="illustrations/creations/titre.png" alt="Illustration" />&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper volutpat dignissim. Vestibulum ligula nunc, suscipit nec tristique et, vestibulum a orci.
</div>

Au niveau du CSS, pleins de choses, mais rien qui ne concerne cela.

je cherche à centrer verticalement le texte sur l'image.

Par exemple, au lieu d'avoir (les | représentent l'image)

|
|
|
|
|
| mon texte qui est long ^^.

J'aurais :

|
|
|
| MON TEXTE ICI
|
|
|

L'ennui c'est que j'ai toujours un soucis. Soit le texte est en bas, soit il est bien centré verticalement, mais qu'une ligne, et la deuxième est toujours après l'image.

Bref, je vois pas là.

Merci à vous de m'aider. BO
Bonne soirée à tous !
Bonsoir Jeoffrey54,

pour régler ton problème, je te propose ce code, en espérant qu'il te conviendra.
Tu peux modifier ce code à ta guise.

Tout d'abord, le XHTML :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
   </head>
   <body>
   
	<div id="texte">
		<p>Mon texte ici</p>
	</div>
   
   </body>
</html>


Ici, rien de bien compliqué, j'ai juste crée une div que j'ai nommé texte et j'y ai inséré une phrase.

Maintenant, le CSS :


/* Feuille de style CSS */

#texte {
	border: 1px dotted #444444; /* Bordure autour de l'image. */
	background-image: url("images/avatar jQz.png"); /* On inclue l'image en background de la div, de ce fait, le texte sera sur l'image. NOTE : Ton chemin est peut-être différent du miens, il faudra, dans ce cas, le changer  */
	background-repeat: no-repeat; /* On empêche le répètement de l'image. */
	width: 90px; /* Taille de l'image, à modifier */
	height: 90px; /* Hauteur de l'image, à modifier */
	text-align: center; /* On centre le texte */
}


Les commentaires, sont directement incluent dans le code.

Code valide et respectant les normes.

Voilà Smiley cligne
Le vertical-align:middle donnera le rendu déjà décrit:
Jeoffrey54 a écrit :
Soit le texte est en bas [vertical-align: baseline], soit il est bien centré verticalement, mais qu'une ligne, et la deuxième est toujours après l'image.

Dans le cas présent, on va avoir besoin d'un moyen efficace et robuste de faire du centrage vertical de deux contenus sur une hauteur indéterminée. Et ça se fait comment? Avec un rendu de type «cellule de tableau». Donc soit du display:table-cell, soit un bon vieux tableau des familles. Je vous laisse choisir. Smiley smile
Bonsoir à tous !

@ jQz : Ta solution est pratique et marche, mais j'ai plusieurs divs cadre-creations, donc je devrais avoir une propriété pour chaque div dans mon CSS, ce qui n'est pas du tout pratique.

@ Heyoan : Déjà essayé, cela ne marche pas.

@ Florent V. : La hauteur est déterminée, enfin celle des images est de 150 px pour la hauteur, et 250px pour la largeur.
Rebonsoir Smiley smile

Finalement j'ai trouvé en m'aidant de la piste display:table-cell donnée par Florent V..

Voici le code XHTML que j'utilise :

<div class="cadre-creations">
<h2>Titre</h2>
	<img src="illustrations/creations/titre.png" alt="Illustration" /><span>Du bla bla de description</span>
</div>


Et le CSS :

div.cadre-creations {
display:table;
padding:1em;
margin: 1em;
}
div.cadre-creations span
{
vertical-align:middle;
display:table-cell;
padding:1em;
}


Et ca marche du tonnerre Smiley cligne

Merci à tous ceux qui ont planché sur le sujet.

Bonne soirée Smiley smile
Jeoffrey54 a écrit :
Et ca marche du tonnerre Smiley cligne
Attention quand même : ce ne sera pas interprété par IE6 et IE7 (contrairement à un tableau).
Ah, histoire de combler ma joie, en effet, ca marche pas sur IE. Y'a pas moyen de faire marcher sa ? Obligé d'utiliser un tableau dans ce cas ?
Jeoffrey54 a écrit :
Ah, histoire de combler ma joie, en effet, ca marche pas sur IE. Y'a pas moyen de faire marcher sa ?

Si, ça s'appelle Internet Explorer 8 et c'est sorti en mars 2009. Smiley smile
Pour la petite histoire, Net Applications donne IE8 à 5-6% de parts de marché pour ces derniers jours.

Tu peux aussi traiter IE6 et IE7 en «dégradation gracieuse», en leur appliquant quelques styles bien choisis (via un commentaire condtionnel qui va bien), par exemple pour faire flotter l'image et laisser le texte se placer à droite grâce à un margin-left... le texte sera alors en haut dans son espace réservé (sous IE 6-7), et pas au centre.

Jeoffrey54 a écrit :
Obligé d'utiliser un tableau dans ce cas ?

Tu n'es pas obligé, tu as la possibilité de, si ça correspond à ton besoin et tes objectifs.

Pour finir, vu que tu as une hauteur déterminée pour tes images, tu peux sans doute utiliser display: inline-block pour transformer ton image (ou un conteneur direct de l'image) et ton texte (un conteneur direct du texte, par exemple un SPAN placé autour) en «boite en ligne», les deux pouvant alors être en vertical-align: middle dans un conteneur en line-height: 150px.

Je me demande si la solution du tableau ou du display:inline-block n'est pas moins limitante au niveau du code HTML utilisable pour baliser le texte (tu ne pourras pas avoir deux paragraphes, ou un seul d'ailleurs, dans ton SPAN en display:inline-block...).
Okay.... Je vais regarder tout ça à tête reposée et essayer d'utiliser les commentaires condtionnels pour IE6 et 7.

En tout cas merci à toi Florent V. pour ta précision !
Modifié par Jeoffrey54 (13 May 2009 - 00:07)
À la réflexion, utilise display:table-cell, ou bien un tableau, mais plutôt pas display:inline-block. Ce dernier est techniquement utilisable, et même intéressant ici, mais pas évident à mettre en place et comprendre, donc c'est pas vraiment un bon choix.

Le but n'est pas tellement d'avoir un code «propre» (il parait qu'utiliser un tableau de mise en page ne serait pas propre...) que d'avoir un code que l'on maitrise et que d'autres peuvent maitriser également. Smiley smile
Sujet clos
Aller à