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 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 <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>
Je ne mets pas le javascript, puisque c'est un soucis d'affichage uniquement.
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
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; }
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é
Attendu
Attendu, avec moins d'éléments
Quelqu'un aurait-il une solution pour mon problème?
Merci d'avance!![]()
Partager