Centrer horizontalement un nombre n d'éléments 'block'
Bonjour à tous!
Voici le problème qui m'occupe.
J'ai conçu une sorte de 'clavier virtuel' pour les utilisateurs de la plateforme d'apprentissage pour laquelle je travaille.
Ce clavier virtuel ne comporte que les caractères spéciaux, langue par langue. Par exemple, en espagnol, il y a 8 caractères spéciaux, alors qu'en français, il y en a 13.
Le tout est géré dynamiquement, mais peu importe.
J'ai une <div id="vKeyboard"> qui est destinée à recevoir chacune des lettres (affichées sous forme d'un pseudo-bouton, en fait une balise <a> stylée par CSS).
Voici les codes:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<div id="vKeyboard">
<a href="javascript:sendLetter('â');">â</a>
<a href="javascript:sendLetter('à');">à</a>
<a href="javascript:sendLetter('ç');">ç</a>
<a href="javascript:sendLetter('é');">é</a>
<a href="javascript:sendLetter('è');">è</a>
<a href="javascript:sendLetter('ê');">ê</a>
<a href="javascript:sendLetter('ë');">ë</a>
<a href="javascript:sendLetter('î');">î</a>
<a href="javascript:sendLetter('ï');">ï</a>
<a href="javascript:sendLetter('ô');">ô</a>
<a href="javascript:sendLetter('û');">û</a>
<a href="javascript:sendLetter('ü');">ü</a>
<a href="javascript:sendLetter('ù');">ù</a>
</div> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| #vKeyboard{
text-align:center;
margin-top:10px;
border:1px solid #af0024;
padding: 5px;
height:30px;
padding-left:auto;
padding-right:auto;
}
#vKeyboard a{
color: white;
background-color: #036793;
text-decoration: none;
font-weight: bold;
text-align: center;
padding: 5px;
border: 2px outset #c0c0c0;
width:25px;
display:block;
float:left;
}
#vKeyboard a:hover{
background-color: #73a9c3;
border: 2px inset #c0c0c0;
} |
Je ne mets pas le javascript, puisque c'est un soucis d'affichage uniquement.
Donc, ma <div> prend toute la largeur disponible, et les éléments <a> qu'elle contient sont bien côte-à-côte. Seulement, ce 'paquet' de <a> est aligné à sur la gauche de ma <div> (cf. image), alors que j'aimerais le voir centré.
Affiché
http://imagik.fr/thumb/170375.jpeg
Attendu
http://imagik.fr/thumb/170376.jpeg
Attendu, avec moins d'éléments
http://imagik.fr/thumb/170377.jpeg
Quelqu'un aurait-il une solution pour mon problème?
Merci d'avance! ;)
