28173 sujets

CSS et mise en forme, CSS3

[résolu] Vertical-align:middle lorsqu'il y a plusieurs lignes

Bonjour,

j'essaye tout simplement d'aligner verticalement du texte par rapport à une image.
Mon souci est que le texte contient un <br /> ce qui ramène les phrase suivante en dessous de l'image... Smiley decu

Quelqu'un pourrait-il me donner l'astuce ?
Merci d'avance
Modifié par Tchupacabra (20 Feb 2007 - 14:29)
Smiley confused un peu de code serait un + 

<p>
<img src="./images/logo.gif" width="100" height="100" alt="" />Le logo<br />bla bla
</p>
avec en CSS :
p img {
    margin: 20px;
    vertical-align: middle;
}


Smiley smile
Salut.

La propriété vertical-align, quand elle est appliquée à un élément de type inline comme <img />, détermine la position par rapport à la ligne de texte.

Au contraire, dans le cas d'une cellule de tableau, elle provoque le centrage vertical par rapport à la cellule.

Dans ton cas, vertical-align ne fait que décaler l'image sur la ligne de texte.

Les méthodes pour centrer verticalement un élement sont décrites dans la FAQ ...
merci Thomas D. pour ton éclaircissement... Smiley cligne

cependant, j'ai l'impression que la FAQ n'a pas de solutions pour mon problème... Smiley ohwell en gros, faut utiliser un tableau ?
Tchupacabra a écrit :
en gros, faut utiliser un tableau ?

Soit tu sais à l'avance quelle importance aura ton texte et tu te débrouilles pour obtenir un résultat correct en faisant flotter l'image, par exemple, et en jouant sur des marges... soit la quantité de texte est variable, et pour être sûr de ton coup (obtenir un centrage vertical harmonieux) tu auras alors intérêt à utiliser un tableau.
Pour éviter le tableau, il existe la solution bien connu avec table-cell
pour Firefox et les autres navigateurs alternatifs.
et une solution pour IE (avec inline-block) si ça t'interesse.
Modifié par Hermann (01 Jun 2007 - 01:52)
En effet si la hauteur de ton texte reste fixe tu as plusieurs solutions
possibles dont celle décrite par Florent.

Dans le cas d'un texte de hauteur variable les choses se corsent un peu :
comme vertical-align se base sur la taille de font-zize, l'astuce consiste
à donner à l'élément parent (ici le <p>) une hauteur de font-zize
équivanvente à 100px (hauteur de ton image).

Appliquer ensuite un vertical-align:middle au texte n'aura en principe
pour effet que de centrer la boîte en-ligne (valeur font-size+interligne) de la première ligne du texte.
Un inline-block (non implémenté par Firefox) rectifira le tir en centrant
verticalement le bloc de texte complet.

Certe c'est un peu tordu mais pourquoi aprés tout ne pas utiliser tout le potentiel de CSS pour arriver à ses fin.

Exemple de code avec commentaires :
Cette méthode suppose une taille de texte de base à 75% et une taille
de police du navigateur standard : 16px

p {font-size: 8.33em;} /* pour conserver une taille de police relative :
16 x 0.75 x 8.33 = 100px*/

span.texte {
	display:inline-block;
	font-size: 0.12em; /*on récupère la taille par default : 12px*/
	vertical-align: middle;
}


La solution que je donne ne fonctionne qu'avec un parent de hauteur fixe.
Mais attention je te garantis pas à 100% du bon fontionnement de cette
méthode.
Enfin ne pas oublier que cette méthode ne fonctionne que sur IE.
Modifié par Hermann (20 Feb 2007 - 12:44)
merci Hermann pour ton aide Smiley cligne

malheureusement, mon texte étant dynamique, je vais rester sur les tableaux...

@+ pour de nouvelles aventures CSS Smiley langue
Modérateur
bonsoir,

(avec hermman , nous avons des idées tres similaire sur l'usage possible du display:table et de faire usage du "haslayout " pour obtenir un resultat proche dans IE)

Voici donc une autre astuce permettant d'aligner visuellement le contenu de 2 element block (ou inline) dans ff et dans IE .


<!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" lang="fr">
<head>
<title>valign text image</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type='text/css'>
#global {
	margin-left: auto;
	margin-right: auto;
	width: 750px;
	background-color:#abc;
}

div.projet-v-align {
	display:table-row;/* ou display:table; l'un et l'autre devraient apparaitre */
	margin-top: 35px;
	background-color:#E9E9E9;
	text-align:center;
}

p.ptxt {
	display:table-cell;
	vertical-align:middle;
	width:368px;
	border:3px double #EF9B48 ;
}
img.imge {
	margin:5px 20px 5px 5px;
}
* html .ptxt   {
	display:inline;
	zoom:1;
	vertical-align:middle;
}
</style>

</head>
<body>
<div id="global">
<h1>test</h1>

<div class="projet-v-align" >
		<p class="ptxt">
			<img src="http://css.alsacreations.com/quiz.jpg" class="imge" alt="AlsaQuiz"  />
		</p>
		<p class="ptxt">Tient voila dont quelque chose d'interessant !
		<br />
		<a href="http://quiz.alsacreations.com/" title="tester vos connaissances">LE QUIZZ !</a>
		<br />
		Le quiz de connaissance "Alsacréations" .
		</p>
</div>
<p>Pour comprendre ou realiser qu'elles sont les differences dans IE et les autres:</p>
<p>une bordure appliqué va bien mettre en evidence que l'on a affaire a des paragraphe transformé en cellules de tableau dans FF , 

Mais que dans IE nous avons 2 paragrphe transformé en element inline et doté du layout avec la regle "zoom:1; qui leur donnent alors 

la possibilité d'etre dimensionné et de recevoir des element de style br tout en gardant un comportement d'element inline .
</p>
<p>fin du test</p>
</div>
</body>
</html>


Une fois de plus , cela ne remplace pas un tableau et ce n'est qu'un melange de comportements specifiques aux differents navigateurs .

Si l'astuce semble compliquée , ou difficilement "comprise" , mieux vaut en resté au tableaux plutot que de se frustrer pendant des heures ou etre obliger d'ecrire un mode d'emploi a celui qui va reprendre la maintenace derriere vous.

GC
Sujet clos
Aller à