28173 sujets

CSS et mise en forme, CSS3

Comment faire le valign middle du texte d'un <a> ?

Bonjour à toutes et à tous...

j'essaye tant bien que mal d'aligner verticalement le texte des balises <a> ci-dessous. Malgré tous mes tests, je n'ai pas trouvé l'astuce... Smiley confus
Alors est-ce que quelqu'un de plus expérimenté que moi pourrais m'indiquer la solution Smiley rolleyes parce que là y en a marre je perd un temps fou pour faire ma mise en page...
<!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>Test d'alignement vertical du texte d'une balise &lt;a&gt;</title>
<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />

<style type="text/css">
<!-- 
a {
    border: 1px solid #000000;
    float: left;

    width: 110px;
    height: 60px;
	
    color: #000000;
    text-decoration: none;
	
    text-align: center;
    vertical-align: middle;
}
 -->
</style>

</head>
<body>

    <a href="#">Accueil</a>
    <a href="#">Bonjour et bonsoir</a>
    <a href="#">Du texte</a>

</body>
</html>


Le but final est d'avoir un menu <ul><li> centré horizontalement mais ça ça c'est bon... Smiley smile Y a plus qu'a centrer le texte des liens !

Merci d'avance pour votre aide, qui je l'espère me fera avancer.... Smiley biggrin

@+ Smiley cligne
Bonsoir,
Pourquoi ne donner qu'une partie du code?
La propriété vertical-align ne s'applique qu'aux éléments en-ligne et aux
éléments de type table-cell (td)
Or la propriété float:left fait passer la valeur du display des lien à block.
La propriété line-height devrait faire l'affaire:


a {
    border: 1px solid #000;
    float: left;
    width: 110px;
    line-height: 60px;
    color: #000;
    text-decoration: none;


Pourquoi utilise tu un float:left alors que tu as des intitulés de rubriques
plus ou moins long?
Modifié par Hermann (07 Feb 2007 - 14:02)
Bonsoir Hermann et merci pour ta participation ! Smiley cligne

¤ J'ai donné qu'une partie du code pour isoler la problème...
¤ ok pour l'explication sur le vertical-align (merci)
¤ float:left me permet de mettre mon menu sur une seule ligne
¤ je souhaite imposer une taille fixe à toutes mes rubriques (110x60)

La difficulté est lorsque une rubrique du menu contient du texte sur plusieurs ligne : line-height n'alignera pas les rubriques sur une seule ligne... Smiley murf

Smiley bawling
Modérateur
bonjour , suit tu suit les lien de la faq tu aura une reponse a ce que tu veut faire .

un display:table , puis table-cell pour firefox et Cie et pour IE un element supplementaire de type inline (span par exemple ) auquel on confere le layout . ce qui te permetrra d'aligner (dans IE) 2 element de type inline et de faire un alignement verticale dans les autres comme une cellule de tableau , car ce sont les propriétés que confere le display:table-cell a la balise qui reçoit cette regle.

le display table-cell met tout le monde sur une ligne (tr) et le inline + layout dans IE peut aussi t'affranchir du float dans les 2 type de navigateur.

GC
Modifié par gcyrillus (06 Feb 2007 - 23:30)
Salut,
@gcyrillus : tu présumes un peu vite des connaissances de Tchupacabra, notamment à propos du concept de Layout.

Voilà une solution pour IE un peu complexe mais qui a le mérite de bien fonctionner et de ne pas imposer une balisage du type <span></span>.
Celle-ci présuppose que tes liens soient imbriqués dans des <span> (ou autres) et que la taille de police du navigateur soit fixée à 16px, ce qui est heureusement très fréquent.

span {
    float:left;
    text-align: center;
    border: 1px solid #000;
    width: 110px;
    height: 60px;
    line-height:1.2; /*optionnel. Ne pas mettre d'unité!*/
    font-size: 5em; /*variable qui se base sur une taille par default du texte
 de 75% [16px (taille par default des navigateurs) X 0.75 =12px X 5 = 60px
 = hauteur du conteneur)]*/
    }

span a {
	display:inline-block;
	font-size: 0.3em; /*pour redefinir la taille du texte*/
	vertical-align: middle; /*se base sur la valeur du font-zise du bloc*/
	text-decoration: none;
        color: #000;
	}

Modifié par Hermann (07 Feb 2007 - 15:47)
merci pour votre aide...

gcyrillus : désolé mais mes connaissances restent basiques et malgré plusieurs relecture de ton commentaire... je n'ai pas tout compris. Smiley decu

Donc n'ayant toujours pas trouver de solution... même en essayant celle d'Hermann, je vous propose mon code actuel NON compatible avec IE (avec lui c'est clair c'est la guerre Smiley fache )

<!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>Test d'alignement vertical du texte d'une balise <a></title>
<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
<style type="text/css">
<!-- 
* {
	padding: 0;
	margin: 0;
}
body, html {
	width: 100%;
	height: 100%;
}
div#page {
	margin: 0 auto;
}
div#menu {
	border: 1px dashed #FF0000;
	width: 890px;
	margin-left: auto;
	margin-right: auto;

	margin-top: 10px;
	margin-bottom: 10px;
	padding: 5px;
}
#menu ul li {
	display: inline;
	list-style-type: none;
}
a {
    display: table-cell; /* non pris en charge par IE */
    text-align: center;
	vertical-align: middle;

	border: 1px solid #000;
    width: 110px;
	height: 60px;
    color: #000;
	text-decoration: none;
}
p {
	border: 1px solid #009933;
	/*display: inline;*/
}
 -->
</style>
</head>
<body>
<div id="page">
	<div id="menu">
		<ul id="menuliste">
			<li><a href="#"><p>Accueil</p></a></li>
			<li><a href="#"><p>Bonjour et bonsoir</p></a></li>
			<li><a href="#"><p>Du texte</p></a></li>
		</ul>
		<div style="clear: both;"></div>
	</div>
</div>
</body>
</html>


A l'aide.... Smiley confus
Salut,
Tu t'es beaucoup trop compliqué en fait.
Voila le code 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">
<head>
<title>Test d'alignement vertical du texte d'une balise</title>
<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
<style type="text/css">
<!-- 
* {
	padding: 0;
	margin: 0;
}
div#page {
	margin: 0 auto;
}
body, html {
	width: 100%;
	height: 100%;
}
#menuliste {
	border: 1px dashed #FF0000;
	width: 890px;
	margin: 10px auto; /*raccourci des 4 déclarations de marge*/
	padding: 5px;
}
#menuliste li {
	list-style: none;
	display: table-cell;
        width: 110px;
	height: 60px;
	border: 1px solid #000;
        text-align: center;
	vertical-align: middle;
}
a {
	text-decoration: none;
        color: #000;
}
 -->
</style>
<body>
<div id="page">
	<ul id="menuliste">
		<li><a href="#">Accueil</a></li>
                <li><a href="#">Bonjour et bonsoir</a></li>
                <li><a href="#">Du texte</a></li>
	</ul>
</div>
</body>
</html>


et pour IE dans une feuille de style en commentaires conditionnels
(voir la FAQ pour les explications)
Ces déclaratiosns viennent s'ajouters à celles défini plus haut:

#menuliste li  {
	float:left;
	font-size: 5em;
    }

a {
	display:inline-block;
	font-size: 0.3em;
	vertical-align: middle;
	}


Lis les commentaire que j'ai ajoutée dans ma deuxième réponse,
ça te permettra de comprendre le fonctionnement des déclarations.

Cet exemple se base sur une taille de police de 75% avec une hauteur de menu de 60px.
Modifié par Hermann (07 Feb 2007 - 14:56)
Smiley eek
Soit, j'ai rien compris soit je m'y prend comme un manche...

¤ le texte dans <a> n'est pas aligner verticalement dans IE
¤ merci pour l'astuce des marges
¤ pourquoi avoir virer mon div#menu ?
¤ d'après mes faibles connaissances en la matière... list-style ne devrait pas s'appliquer à une balise <ul> ?

Smiley ohwell
Tu dois aller sur la FAQ et faire une recherche sur les commentaires
conditionnels pour pouvoir inséré le code pour IE (que je viens de corriger)
En principe ça devrait marcher.
Si l'on suit la spécification CSS, le list-style de devrait s'apliquer
en effet que sur les éléments de type list-item mais il se trouve
que ça fonctionne aussi pour les <ul>.
Le conteneur menu n'es pas necessaire: <ul> est un conteneur comme le <div> sauf qu'il est plus parlant du point de vue
sémantique (un liste non ordonnée)

Je comprends tout à fait que tu ne comprennes pas tout ce qui est en jeu
dans ce code Smiley cligne

Pour les raccourcis CSS : http://pompage.net/pompe/raccourcisCSS/
Modifié par Hermann (07 Feb 2007 - 15:23)
merci beaucoup Hermann, j'ai effectivement réussi à centrer verticalement le texte...
cependant c'est normal puisqu'il n'est plus configurer en temps que bloc ! Ce qui me pose problème, c'est que la zone réactive ne correspond plus à 110*60px mais simplement à la zone de texte...

J'en revient au même point ! Smiley decu

S'il vous plait, m'obligé pas à utiliser <table> ou un menu Flash !!! Smiley bawling
Modifié par Tchupacabra (07 Feb 2007 - 16:18)
En effet...
Voila une solution pour IE mais moins robuste et un peu plus approximative.
Elle est sans doute améliorable mais je n'ai pas tros le temps pour ça, tu le
comprendras j'espère Smiley cligne

Pour les autres navigateurs, il faudra rester sur la solution avec table-cell
mais en t'inspirant des modifications que j'ai apportées (tranfert des tailles vers a...)

Celle-ci implique que tu mettes tes liens sur 2 lignes dans un span
et que tu attribues une class "deux" pour ces liens

Important: avoir ne taille de texte par default à 75%, la hauteur
de 60px etant calculée à partir de cette valeur.
J'ai ajouté un background pour voir les limites des lien:

#menuliste li  {
	display:inline;
	list-style:none;
	font-size: 1.25em;
	}
#menuliste a {
	float:left;
        text-align: center;
        width: 110px;
	line-height: 4em;
	background:#096;
        border: 1px solid #000;
	text-decoration: none;
        color: #000;
	}
#menuliste a.deux {font-size: 3.5em;}
#menuliste a.deux span {
	display: inline-block; 
	vertical-align: middle; 
	line-height: 1.2em; 
	font-size: 0.26em;
	}




	<li><a href="#">Accueil</a></li>
	<li><a class="deux" href="#"><span>Bonjour et bonsoir</span></a></li>
	<li><a href="#">Du texte</a></li>

Modifié par Hermann (07 Feb 2007 - 19:10)
Sujet clos
Aller à