Discussion :

[Maxence45]

Bonsoir , j'aimerais savoir comment on peut centrer un texte verticalement et horizontalement dans les cellulles d'une liste à puces ?

merci

[blueice]

un text-align:center; suffit, le texte lui sera par défaut aligner verticalement, encore faut-il que le padding soit égal en haut et en bas.

[Maxence45]

ok mais pour le code css qui doit doit s'appliquer au texte dans les cellules , je le mets dans le #menu li ?

[Maxence45]

visiblement le text align center ne marche pas , il me décale mon texte à droite , je l'ai mis dans le #menu li a , quelqu'un a une idée ?

[Xann_71]

Salut!

Si tes liens sont dans <div id="menu"> (comme j'ai compris), tu dois saisir dans ton css:

Code :

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

1
2
3
4
5
 
#menu
{
 text-align: center;
}

et non

Code :

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

1
2
3
4
5
 
#menu li a
{
 text-align: center;
}

Et la sa devrai marcher. Dans le cas contraire, montre nous ton code et on pourra mieux repérer le problème.

A+

[Strix]

Ok, en fait tu veux centrer ul dans ton div c'est ça ?
Parce que c'était pas clair du tout au début

voilà le CSS

Code :

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
#menu {
	border: 1px solid black;
	width: 151px;
	height: 164px;
	background: url("menu.gif");
	padding: 0px;
	float: left;
	margin: 0 0 20px 0;
	text-align: center;
}
#menu ul {
	padding: 12px 0 0 0; /* Info : Top Right Bottom Left */
	margin: 0px;
}
#menu li a {
	padding: 0;
	margin: 0;
	height: 41px;
	display: block;
}

Après à toi de jouer avec les padding pour centrer ton menu

[Xann_71]

Oui ta technique est bien Strix mais il y'a un problème au niveau des puces, elles sortent du cadre 5 en tout cas sur FF.

Une autre solution serait de ne pas forcer la taille de ton cadre et de le laisser s'adapter à son contenu.

Petite info en passant: Il vaut mieux utiliser l'unité "em" plutôt que "px".
C'est un développeur qui à observer mes pages qui m'en à parlé.
Aparrement c'est une unité qui s'adapte à la taille de la page ou quelque chose dans le genre.
Mais si tu préfère les px, sa te regarde^^. Moi je ne trouve pas sa plus difficile em.
A+

[Maxence45]

strix oui , j'ai simplifié le code exprès pour vous aider en fait , alors voici le code html et css :

( le code html n'a aucun soucis , c'est juste le css ) :

Code :

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

1
2
3
4
5
6
7
8
<div id="menu">
<ul>
<li><a href="#">blabla</a></li>
<li><a href="#">Blabla</a></li>
<li><a href="#">blabla</a></li>
<li><a href="#">blabla</a></li>
</ul>
</div>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
#menu {
border: 1px solid black;
width: 150px;
float: left;
margin: 0 0 20px;
}
 
#menu li a {
border: 1px solid black;
display: block;
margin: 2px;
}

Je veux juste que les cellules li soient centrées dans le div , comme tu le remarque elles sont décallées à droite...

[Strix]

rajoute

Code :

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

1
2
3
4
 
#menu ul {
	padding: 0 0 0 17px;
}

[Maxence45]

Bon je suis satisfaite du résultat , c'est pas centré parfaitement mais ce n'est pas grave , je te remercie , j'ai cependant quelques petites questions sur le code s'il te plait :

1.pourquoi si je change ton 17 en 20 par exemple la cellule revient vers la droite?

2.à quoi finalement sert mon display: block ?

3.J'aimerais mettre une image de fond dans mes cellules mais impossible de créer l'image tant que je ne connais pas la taille des cellules , ya un moyen de connaitre leur taille ?

merci

[Strix]

1. Le 17px est l'espace qui se trouve à gauch de ta liste donc si tu augmentes celui-ci il est normal que ta liste ce déplace vers la droite.
Exemple tout bête :
- texte
-- texte
En aillant rajouter un -, mon texte se déplace sur la droite

2. Cours CSS : display

3. Difficile de créer tes images sans tailles, il va falloir en fixer

[Maxence45]

Par contre strix ya juste un dernier petit soucis , sous firefox j'ai parfaitement ce que je veux mais sous internet explorer les cellules li sont centrées en haut à droite , que faire pour y remédier ?

merci

Edit : et en plus mes cellules li ont diminué en taille

[Maxence45]

non çà ira finalement , merci .