28172 sujets

CSS et mise en forme, CSS3

Alignement vertical dans un block

Bonjour

J'ai écrit une classe me permettant de mettre en place des liens alignés horizontalement avec une image de fond.

La classe :


.linkMenuOff {
	width:128px;
	height:35px;
	background:url(mon/image);
	text-align:center;
	display:block;
	float:left;
}


Ceci fonctionne très bien sauf que le text du lien est positionné tout en haut du block. J'aimerais l'aligner au centre, mais je ne vois pas comment faire ceci proprement.

Je suis ouvert à tout autre méthode quitte à changer complètement de méthode.

Merci d'avance. Smiley smile
Modifié par iLoLo21 (10 Dec 2008 - 10:55)
Bonjour,

Le texte sera toujours sur une seule ligne? Auquel cas, jouer sur du padding-top (en diminuant d'autant la hauteur) ou sur du line-height peut faire l'affaire. La FAQ du forum en parle, bien entendu.

Pour quelque chose d'adaptable que le texte soit sur une ou deux lignes, point de salut en dehors de display:inline-block et display:table-cell. Les deux ont un support relativement limité, essentiellement à cause d'Internet Explorer 6 et 7 (et Firefox 2 pour display:inline-block). Bien entendu, le rendu de type "table-cell" s'obtient aussi avec un tableau de mise en forme.
Dans le meilleur des mondes, le texte devrait tenir sur une seule ligne. Mais comme ça serait trop beau je préfère prévoir le coup si besoin.

J'avais bien pensé au padding, mais la solution reste limité effectivement.

La solution du tableau est pour moi à proscrire Smiley smile

En ce qui concerne le display:inline-block et/ou display:table-cell n'y a t'il pas des petites adaptations à faire ? Car il me semble avoir essayé il y a un petit moment et sans résultat notable. (J'avoue ne pas avoir été trop en profondeur vis à vis de cette méthode)
iLoLo21 a écrit :
La solution du tableau est pour moi à proscrire Smiley smile

Allons bon.
Sinon il y a aussi un truc pratique qui s'appelle le pragmatisme. Smiley smile

iLoLo21 a écrit :
En ce qui concerne le display:inline-block et/ou display:table-cell n'y a t'il pas des petites adaptations à faire ? Car il me semble avoir essayé il y a un petit moment et sans résultat notable.

Eh bien ça marche partout sans dans Internet Explorer 7 et inférieurs. Donc si tu avais testé avec d'autres navigateurs, tu as dû faire une erreur... ou attendre un résultat différent de celui qu'on peut obtenir avec ces valeurs.
Modifié par Florent V. (10 Dec 2008 - 14:53)
a écrit :
Sinon il y a aussi un truc pratique qui s'appelle le pragmatisme.


lol oui effectivement, mais ça doit être mon coté perfectionniste. J'ai du mal à dérouter un objet de sa fonction normal Smiley cligne

a écrit :
Eh bien ça marche partout sans dans Internet Explorer 7 et inférieurs. Donc si tu avais testé avec d'autres navigateurs, tu as dû faire une erreur... ou attendre un résultat différent de celui qu'on peut obtenir avec ces valeurs.


Et bien je viens d'essayer ceci :

.linkMenuOff {
	width:128px;
	height:35px;
	background:url(mon/image);
	text-align:center;
	display:table-cell;
	float:left;
}


D'après la doc, le texte devrait être automatiquement centré verticalement mais sans résultat meme avec un vertical-align:middle;...

Le texte est toujours en haut. Testé sous firefox 3 et Chrome.

Aurais-je loupé un truc ?
iLoLo21 a écrit :
Et bien je viens d'essayer ceci :

.linkMenuOff {
	width:128px;
	height:35px;
	background:url(mon/image);
	text-align:center;
	display:table-cell;
	float:left;
}


Moi quand je fais un test j'utilise aussi et avant tout du code HTML. Je suppose que c'est également ton cas. Question: il faut deviner le code en question? Pour ce qu'on en sait, tu as pu appliquer cette classe sur BODY, sur un DIV, un UL, un LI, un A, un SPAN, un TEXTAREA, qu'en sais-je... Smiley cligne

Une page en ligne, peut-être?
Modifié par Florent V. (10 Dec 2008 - 15:29)
Oui désolé, ça parait toujours évident au premier abord.




<html>

<style>

.test{
	width:128px;
	height:35px;
	background-color:#000;
	text-align:center;
	display:table-cell;
	float:left;
	vertical-align:middle; 
}

</style>

<body>

	<a class="test" href="#">Test</a>
	
</body>

</html>

Modifié par iLoLo21 (10 Dec 2008 - 15:37)
Et donc la page n'a pas de Doctype? ... ... ...

Edit: ça marche bien chez moi, en supprimant le float:left parasite, et avec un Doctype en bonne et due forme.

Mon test qui marche:
<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Page de test</title>
	<style type="text/css" media="screen">
	.test{
		display: table-cell;
		width: 200px;
		height: 200px;
		vertical-align: middle;
		text-align: center;
		background-color: #eee;
	}
</style>
</head>
<body>

<p><a class="test" href="#">Test</a></p>

</body>
</html>

Modifié par Florent V. (10 Dec 2008 - 15:52)
Je savais que tu allais dire ça lol

C'est pourquoi j'ai refait le test avec un doctype. Le résultat est le meme pour ca que je ne l'ai pas rajouté dans le post.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<style>

.test{
	width:128px;
	height:35px;
	background-color:#000;
	text-align:center;
	display:table-cell;
	float:left;
	vertical-align:middle; 
}

</style>

<body>

	<a class="test" href="#">Test</a>

	
</body>

</html>
iLoLo21 a écrit :
C'est pourquoi j'ai refait le test avec un doctype.

Oui enfin faut faire les tests avec Doctype dès le départ, hein. Ne jamais travailler une seconde en mode Quirks.

PS: réponse ci-dessus.
Et pour illustrer de l'inline-block:
<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Page de test</title>
	<style type="text/css" media="screen">
	p {
		width: 200px;
		height: 200px;
		line-height: 200px;
		text-align: center;
		background: #eee;
	}
	a {
		display: inline-block;
		vertical-align: middle;
		line-height: 1.2;
	}
</style>
</head>
<body>

<p>
	<a class="test" href="#">
		Test<br />
		Test encore<br />
		Et voilà<br />
		Un dernier pour la route<br />
		Et fin
	</a>
</p>

</body>
</html>

Modifié par Florent V. (10 Dec 2008 - 15:58)
Ok thanks.

Je viens de comprendre pourquoi mon code ne fonctionne pas.

C'est l'attribut float (Non présent dans ton test) qui pose problème.

Avec float:left dans la class du lien, le texte se remet automatiquement en haut.
Smiley sweatdrop

EDIT : En fait je pense que je peux virer le float:left. Il a l'air inutile. Je vais tester ça dans mon code final pour voir si je peux m'en passer. Merci pour ton aide ! Smiley ravi

RE-EDIT : A je viens seulement de voir ton commentaire sur le float parasite. Bonne réponse
Modifié par iLoLo21 (10 Dec 2008 - 16:27)
Sujet clos
Aller à