28221 sujets

CSS et mise en forme, CSS3

[Résolu] Centrage vertical du texte dans un li ?

Bonjour,

J'ai un menu dans lequel les liens sont inclus dans des éléments de listes. En gros au niveau structure voilà ce que ça donne :


<div id="menu">
<ul>
<li><a href="...">menu1</a></li>
<li><a href="...">menu2</a></li>
</ul>
</div>


Et l'extrait de CSS concerné donne ça :

#menu ul li{
	border-bottom: 1px solid #CCC;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	height:2em;
}

#menu li a{
	display: block;
	color: #333333;
	background: transparent;
	height:2em;
}

#menu li a:hover{
	display: block;
	color: Black;
	background: #DDDDDD url(img/curseur.gif) repeat-y right; /* Bling Bling No Flash */
}

#menu ul li:first-child{
	/* :fisrt-child selector ne fonctionne pas dans IE */
	border-top: 1px solid #CCC;
}

Mon problème c'est que j'aimerais bien centrer mon texte verticalement dans les éléments de menu sans toucher aux padding ou au margin parce que ça taillerait dans mon effet de hover.

Si vous voulez voir ce que ça donne, c'est dans le menu latéral gauche de cette page : http://www.epseelon.net

A votre avis c'est possible ?

Merci d'avance.

rozwel (aka daneel)

PS : je précise au passage que j'ai lu tous les articles de alsacréations et de openweb concernant le centrage et qu'ils parlent tous de centrage vertical de blocs mais pas de centrage vertical de texte dans un bloc.
Modifié le 25 Jan 2005 - 17:49
Désolé de ne pas avoir regardé correctement la recherche mais la plupart du temps les gens cherchent à centrer un div dans un autre, rarement un texte dans un bloc. donc j'ai pas cherché plus loin... Mea Culpa.

Au passage je donne quand même l'astuce : il suffit de rajouter la propriété line-height et de lui filer la même hauteur que l'élément dans lequel se trouve l'élément. En l'occurence ça donne ça :


#menu ul li{
	border-bottom: 1px solid #CCC;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	height:2em;
        line-height:2em;
}

#menu li a{
	display: block;
	color: #333333;
	background: transparent;
	height:2em;
        line-height:2em;
}


Merci d'avoir quand même pris le temps de me filer les liens et de m'avoir permis de résoudre mon ch'tit problème.
Au passage je trouve ça quand même un peu tarabiscoté comme solution et ça me conforte dans l'idée que le CSS est décidément la moins pire des solutions à l'heure actuelle mais il faudrait vraiment qu'ils nous pondent un truc qui fasse un peu moins appel à ce genre de MacGyver-ismes chez W3C.

Merci encore
Administrateur
Il est vrai que le centrage vertical relève du bidouillage.
En fait l'explication est assez logique : les CSS s'adaptent au médias actuels et à leur multitude.
Le web n'est pas le seul média existant : il existe bien d'autres supports de sortie qu'un écran d'ordinateur, or pour ces supports, le concept de hauteur et de centrage vertical n'a pas lieu d'être.

En tout cas, je suis ravi que mes liens et leur lecture t'aient permis de régler ton problème.
N'oublie pas de le signifier pour les futures recherches, en ajoutant un [Résolu] dans ton titre Smiley smile
Pas faux ! Mais alors la question qui se pose c'est de savoir si c'est vraiment pertinent de tout faire au même endroit (CSS) puisque des principes aussi énormes que la notion de taille de la zone d'affichage ne sont pas consistents. Un des trucs les plus frustrants par exemple c'est qu'on ne puisse pas gérer une parenté du style DOM avec des variables pour faire des beaux layouts comme on peut les faire dans d'autres langages. C'est un gros inconvénients des langages déclaratifs.

Personnellement je pense qu'à vouloir tout faire, CSS fait tout moyennement bien et que pour faire monter d'un cran la qualité du visuel sur Internet, le W3C a encore du boulot...

Mais bon là j'extrapole Smiley cligne Comme quoi le Web a encore de longues années d'évolution devant lui...
Sujet clos
Aller à