Centrer une balise lien <A>

joel5632 · 03/03/2011, 08h43

bonjour,

Je souhaite centrer un lien avec du css

Dans le HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<A class="returnTOC" href="index.html">Return to table of content</A>

et dans le CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
A.returnTOC
{
  text-align : center;
  font-size :  1.3em;
}

la fonte 1.3m est bien prise en compte mais pas le centrage. Même comportement sous ie8 et firefox 3.6.8

Ou est l'erreur ?

merci

ornitho13 · 03/03/2011, 08h49

Salut,

Si tu donnes une largeur à ton A, il sera centré.

joel5632 · 03/03/2011, 09h09

oui effectivement si je précise un width cela déplace le lien horizontalement.

Mais c'est la largeur de quoi ? Du texte du lien ? Comment la connaître ?

Je ne sais pas quelle valeur de width mettre ensuite je constate
que si je retrecie la fenêtre et bien le lien ne reste pas au milieu
de la page.

Ce n'est pas equivalent à

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<CENTER><A href="index.html">Return to table of content</A></CENTER>

ornitho13 · 03/03/2011, 09h35

Si tu veux que ton lien reste au milieu de la page, il faut utiliser le margin, lui spécifier une largeur et le mettre en display:block.

Exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<body>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
	a{
		margin:0px auto;
		width:100px;
		display:block;
	}
</style>
</head>
<body>
	<a href="#">mon lien</a>
</body>
</html>
</body>

Si tu veux mettre la longueur du href à la volée, il va falloir que tu passes par du javascript

joel5632 · 03/03/2011, 10h04

Tout ça pour remplacer la balise <CENTER>

Pfff ...

ornitho13 · 03/03/2011, 14h20

tu peux également faire comme ça (ça ressemble au <center>) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
	div{
		text-align:center;
	}
</style>
</head>
<body>
	<div>
		<a href="#">mon lien</a>
	</div>
</body>
</html>

joel5632 · 04/03/2011, 13h58

j'ai fait comme indiqué par ornitho:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
A.returnTOC
{
  text-align : center;
  display : block;
}

C'est parce que <A> est par defaut un élément de type "ligne" et que text-align = center ne marche qu'avec les élement de type "block"

03/03/2011, 09h09	#3
joel5632 Invité de passage Inscription : mars 2011 Messages : 4 Détails du profil Informations forums : Inscription : mars 2011 Messages : 4 Points : 0 Points : 0	oui effectivement si je précise un width cela déplace le lien horizontalement. Mais c'est la largeur de quoi ? Du texte du lien ? Comment la connaître ? Je ne sais pas quelle valeur de width mettre ensuite je constate que si je retrecie la fenêtre et bien le lien ne reste pas au milieu de la page. Ce n'est pas equivalent à Code html : Sélectionner tout - Visualiser dans une fenêtre à part <CENTER><A href="index.html">Return to table of content</A></CENTER>
	00

03/03/2011, 08h49	#2
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	Salut, Si tu donnes une largeur à ton A, il sera centré.
	00

03/03/2011, 10h04	#5
joel5632 Invité de passage Inscription : mars 2011 Messages : 4 Détails du profil Informations forums : Inscription : mars 2011 Messages : 4 Points : 0 Points : 0	Tout ça pour remplacer la balise <CENTER> Pfff ...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email