[BootStrap] Centrer une élément SELECT

**Media20** · 10/08/2022, 00h00

Bonjour à toutes et à tous

Je voudrais centrer ma liste deroulante.
Est-ce une obligation de passer par une url?
Si quelqu'un pouvait m'aider cela m'avancerait.
Merci d'avance

je vous joins le html

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="ROBOTS" content="all">
<meta name="keywords" content="mot clé 1,mot cle 2,Mot clé 3, Mots clefs">
<meta name="title" content="Lettre B">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Lettre B</title>
<!-- chargement des feuilles de style -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="../css/Footer.css" rel="stylesheet" type="text/css">
<link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/modele1.css" rel="stylesheet" type="text/css">
<link href="file:///D|/css/style.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link href="file:///D|/css/styleraces.css" rel="stylesheet" type="text/css">
<link href="../css/listingraces.css" rel="stylesheet" type="text/css">
<!-- Fin des feuilles de style --> 
<!-- Styles -->
<style>
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: .1rem;
    margin-right: .1rem;
}
.dropdown-submenu a::after {
    transform: rotate(-90deg);
    position: absolute;
    right: 6px;
    top: .8em;
}
li .dropdown-toggle:after {
    transition: all 0.5s;
}
li.show > .dropdown-toggle:after {
    transform: rotate(180deg);
}
li li.show > .dropdown-toggle:after {
    transform: rotate(90deg);
}
</style>
<!-- Fin des styles --> 
<!-- Debut des scripts --> 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> 
<script>
window.addEventListener("DOMContentLoaded", (event) => {"use strict";
 document.querySelectorAll('.dropdown-menu a.dropdown-toggle').forEach((elt) => {
elt.addEventListener('click', (e) => { e.stopPropagation();
e.preventDefault();
let subMenu = elt.nextElementSibling;
if (!subMenu.classList.contains("show")) {
let show_elem = elt.parentElement.parentElement.querySelectorAll(".show")
for (let elem of show_elem) { elem.classList.remove("show")}}           
subMenu.classList.toggle('show'); 
elt.parentNode.classList.toggle('show'); });});});
</script> 
<!-- Fin des scripts -->
</head>
<body>
<header class="container-fluid">
  <nav class="navbar navbar-expand-lg navbar-light bg-light" aria-label="Fifth navbar example" style="max-width:100%;"> <a class="navbar-brand" href="../index.html">Acceuil</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsMain" aria-controls="navbarsMain" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
    <div class="collapse navbar-collapse" id="navbarsMain">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0 flex-wrap">
        <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Les races canines</a>
          <ul class="dropdown-menu">
            <li> <a class="dropdown-item" href="a.html">Rechercher une race</a> </li>
            <li> <a class="dropdown-item" href="../d-ou-vient-le-chien.html">D'où vient le chien</a> </li>
            <li class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">Les documents de votre chien</a>
              <ul class="dropdown-menu">
                <li> <a class="dropdown-item" href="../Documents-genealogiques.html">Les documents généalogiques</a> </li>
                <li> <a class="dropdown-item" href="../Carte-d-identification.html">La carte d'identification</a> </li>
                <li> <a class="dropdown-item" href="../Passeport-européen.html">Le passeport européen</a> </li>
              </ul>
            </li>
            <li class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">La confirmation</a>
              <ul class="dropdown-menu">
                <li> <a class="dropdown-item" href="../examen-de-confirmation.html">L'examen de confirmation</a> </li>
              </ul>
            </li>
            <li> <a class="dropdown-item" href="../Groupes-catégories.html">Groupes et catégories</a> </li>
            <li> <a class="dropdown-item" href="../chien-de-race.html">Le chien de race</a> </li>
            <li> <a class="dropdown-item" href="Races-canines-francaises1.html">Les races canines françaises</a> </li>
          </ul>
        </li>
        <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Votre chien et vous</a>
        <ul class="dropdown-menu">
          <li> <a class="dropdown-item" href="../Droits-et-Devoirs.html">Droits de l'animal et devoirs de l’homme</a> </li>
          <li class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">L'adoption</a>
            <ul class="dropdown-menu">
              <li> <a class="dropdown-item" href="../Adopter-un-chiot.html">L'adoption d'un chiot</a> </li>
              <li> <a class="dropdown-item" href="../Adopter-un-chien-adulte.html">Adopter un chien adulte</a> </li>
              <li> <a class="dropdown-item" href="../Arrivée-du-deuxième-chien.html">L'arrivée d'un deuxième chien</a> </li>
            </ul>
          </li>
          <li class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">La cohabitation</a>
            <ul class="dropdown-menu">
              <li> <a class="dropdown-item" href="../Quand-petit-et-grand-chiens-cohabitent.html">Quand petit et grand chiens cohabitent</a> </li>
              <li> <a class="dropdown-item" href="../La-cohabitation-de-mon-chien-avec-autres-espèces.html">La cohabitation de mon chien avec d'autres espèces</a> </li>
              <li> <a class="dropdown-item" href="../Bébé-arrive.html">Bébé arrive, comment gérer</a> </li>
              <li> <a class="dropdown-item" href="../Chien-en-location.html">Chien en location, impossible de vous l’interdire</a> </li>
              <li> <a class="dropdown-item" href="../Jamais-sans-mon-chien.html">Jamais sans mon chien</a> </li>
            </ul>
          </li>
          <li> 
          <a class="dropdown-item" href="#">
          <li> <a class="dropdown-item" href="La-responsabilité-du-propriétaire.html">La responsabilité du propriétaire d’un chien</li>
          </a> </a>
          </li>
          <li> <a class="dropdown-item" href="../La-responsabilités-légales-des-maîtres.html">La responsabilités légales des maîtres</a> </li>
          <li> <a class="dropdown-item" href="../Quand-on-s-attache-ou-pas.html">Quand on s’attache ou pas</a> </li>
          <li> <a class="dropdown-item" href="../Dormir-avec-son-animal.html">Dormir avec son animal</a> </li>
          <li> <a class="dropdown-item" href="../Les-chiens-distinguent-les-mots.html">Les chiens distinguent les mots</a> </li>
          <li> <a class="dropdown-item" href="../A-quoi-rêve-votre-chien.html">A quoi rêve votre chien</a> </li>
          <li> <a class="dropdown-item" href="../Les-jeux-des-chiens.html">Les jeux des chiens</a> </li>
        </ul>
        </li>
        <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Mon chien</a>
          <ul class="dropdown-menu">
            <li> <a class="dropdown-item" href="../Les-10-commandements-du-bon-maitre.html">Les 10 commandements du bon maitre</a> </li>
            <li class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">Mon chien...</a>
              <ul class="dropdown-menu">
                <li> <a class="dropdown-item" href="../Mon-chien-fugue.html">fugue</a> </li>
                <li> <a class="dropdown-item" href="../N-est-pas-propre.html">n'est pas propre</a> </li>
                <li> <a class="dropdown-item" href="../Ne-m-écoute-plus-quand-il-croise-un-autre-chien.html">ne m’écoute plus quand il croise un autre chien</a> </li>
                <li> <a class="dropdown-item" href="../Est-il-dominant.html">est-il dominant</a> </li>
                <li> <a class="dropdown-item" href="../Se-comporte-comme-un-chiot.html">se comporte comme un chiot</a> </li>
                <li> <a class="dropdown-item" href="../Ne-revient-pas-quand-je-l-appelle.html">ne revient pas quand je l'appelle</a> </li>
                <li> <a class="dropdown-item" href="../S-arrête-sans-cesse-pour-renifler.html">s’arrête sans cesse pour renifler</a> </li>
                <li> <a class="dropdown-item" href="../Ne-pense-qu-à-lui.html">ne pense qu'à lui</a> </li>
                <li> <a class="dropdown-item" href="../Mange-n-importe-quoi.html">mange n'importe quoi</a> </li>
                <li> <a class="dropdown-item" href="../Mange-mal.html">mange mal</a> </li>
                <li> <a class="dropdown-item" href="../Me-parle.html">me parle</a> </li>
                <li> <a class="dropdown-item" href="../Casse-tout-à-la-maison.html">casse tout à la maison</a> </li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Education/Comportement</a>
          <ul class="dropdown-menu">
            <li> <a class="dropdown-item" href="../Psychologie-canine-et-idées-reçues.html">Psychologie canine et idées reçues</a> </li>
            <li class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">Comportement</a>
              <ul class="dropdown-menu">
                <li> <a class="dropdown-item" href="../La-peur-de-la-rue.html">La peur de la rue</a> </li>
                <li> <a class="dropdown-item" href="../Le-chien-parfait.html">Le chien parfait</a> </li>
                <li> <a class="dropdown-item" href="../Le-chien-médiateur.html">Le chien médiateur</a> </li>
                <li> <a class="dropdown-item" href="../Le-chien-peureux.html">Le chien peureux</a> </li>
                <li> <a class="dropdown-item" href="../Le-chien-phobique.html">Le chien phobique</a> </li>
                <li> <a class="dropdown-item" href="../Le-stress-chez-le-chien.html">Le stress chez le chien</a> </li>
                <li> <a class="dropdown-item" href="../Développement-comportemental-du chiot.html">Développement comportemental du chiot</a> </li>
                <li> <a class="dropdown-item" href="../Sevrage-précoce-et-trouble-du-comportement.html">Sevrage précoce et trouble du comportement</a> </li>
              </ul>
            </li>
            <li class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">Education</a>
              <ul class="dropdown-menu">
                <li> <a class="dropdown-item" href="../Instinct-social-et-apprentissage-des-chiens.html">Instinct social et apprentissage des chiens</a> </li>
                <li> <a class="dropdown-item" href="../Pour-qu-il-devienne-un-chien-bien-dans-sa-peau.html">Pour qu'il devienne un chien bien dans sa peau</a> </li>
              </ul>
            </li>
            <li class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">Age et apprentissage</a>
              <ul class="dropdown-menu">
                <li> <a class="dropdown-item" href="../Lui-apprendre-la-solitude.html">Lui apprendre la solitude</a> </li>
                <li> <a class="dropdown-item" href="../L-apprentissage-de-la-propreté-chez-le-chiot.html">L’apprentissage de la propreté chez le chiot</a> </li>
                <li> <a class="dropdown-item" href="../Le-chiot-construit-sa-personnalité.html">Le chiot construit sa personnalité</a> </li>
                <li> <a class="dropdown-item" href="../L-ecole-du-chiot.html">L'école du chiot</a> </li>
              </ul>
            </li>
            <li> <a class="dropdown-item" href="../Psychologie-canine-et-idées-reçues.html">Psychologie canine et idées reçues</a> </li>
            <li> <a class="dropdown-item" href="../Le-développement-comportemental-du-chiot.html">Développement comportemental du chiot</a> </li>
            <li> <a class="dropdown-item" href="../Instinct-social-et-apprentissage-des-chiens.html">Instinct social et apprentissage des chiens</a> </li>
            <li> <a class="dropdown-item" href="../Les-chiens-n-ont-ils-qu-un-seul-maître.html">Les chiens n’ont-ils qu’un seul maître</a> </li>
          </ul>
        </li>
        <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Alimentation</a>
          <ul class="dropdown-menu">
            <li> <a class="dropdown-item" href="../Petit-récapitulatif-sur-l-alimentation.html">Petit récapitulatif sur l'alimentation du chien</a> </li>
            <li class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">En detail</a>
              <ul class="dropdown-menu">
                <li> <a class="dropdown-item" href="../Le-format-de-la-gamelle-influence-la-quantité-distribuée.html">Le format de la gamelle et quantité distribuée</a> </li>
                <li> <a class="dropdown-item" href="../La-meilleure-façon-de-nourrir-votre-chien.html">La meilleure façon de nourrir votre chien</a> </li>
                <li> <a class="dropdown-item" href="../L-alimentation-ménagère-du-chien.html">Alimentation ménagère du chien</a> </li>
                <li> <a class="dropdown-item" href="../Ration-mixte-du-chien.html">Ration mixte du chien</a> </li>
                <li> <a class="dropdown-item" href="../Mon-chien-peut-il-manger-chaud.html">Mon chien peut-il manger chaud</a> </li>
                <li> <a class="dropdown-item" href="../Compléments-alimentaires.html">Compléments alimentaires</a> </li>
                <li> <a class="dropdown-item" href="../Les-aliments-diététiques-pour-chien.html">Les aliments diététiques pour chien</a> </li>
                <li> <a class="dropdown-item" href="../Les-friandises-pour-chiens.html">Les friandises pour chiens</a> </li>
                <li> <a class="dropdown-item" href="../Que-doit-comporter-une-étiquette-de-croquettes.html">Que doit comporter une étiquette de croquettes</a> </li>
                <li> <a class="dropdown-item" href="../La-supplémentation-dans-l-alimentation-du-chien.html">La supplémentation dans l'alimentation du chien</a> </li>
                <li> <a class="dropdown-item" href="../L-Alimentation-du-chien-de-sport.html">L'Alimentation du chien de sport</a> </li>
                <li> <a class="dropdown-item" href="../L-alimentation-du-chien-de-chasse.html">L'alimentation du chien de chasse</a> </li>
                <li> <a class="dropdown-item" href="../Bien-nourrir-nos-meutes-de-chiens-courants.html">Bien nourrir nos meutes de chiens courants</a> </li>
                <li> <a class="dropdown-item" href="../L-alimentation-du-chien-difficile.html">L'alimentation du chien difficile</a> </li>
                <li> <a class="dropdown-item" href="../L-alimentation-du-chien-en-surpoids.html">L'alimentation du chien en surpoids</a> </li>
                <li> <a class="dropdown-item" href="../Le-chien-gros-mangeur.html">Le chien "Gros Mangeur"</a> </li>
                <li> <a class="dropdown-item" href="../Savoir-conserver-les-aliments-de-nos-chiens.html">Savoir conserver les aliments de nos chiens</a> </li>
                <li> <a class="dropdown-item" href="../La-ration-de-nourriture-quand-il-fait-froid.html">La ration de nourriture quand il fait froid</a> </li>
                <li> <a class="dropdown-item" href="../Les-troubles-digestifs-chez-le-chien.html">Les troubles digestifs chez le chien</a> </li>
                <li> <a class="dropdown-item" href="../Recette-de-biscuits-pour-chien.html">Recette de biscuits pour chien</a> </li>
              </ul>
            </li>
            <li class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">Ce qu'il faut éviter</a>
              <ul class="dropdown-menu">
                <li> <a class="dropdown-item" href="../Les-aliments-dangereux-pour-le-chien.html">Les aliments dangereux pour le chien</a> </li>
                <li> <a class="dropdown-item" href="../Les-aliments-que-nos-chiens-doivent-éviter.html">Les aliments que nos chiens doivent éviter</a> </li>
                <li> <a class="dropdown-item" href="../Les-erreurs-alimentaires-classiques.html">Les erreurs alimentaires classiques</a> </li>
              </ul>
            </li>
            <li class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">Les règles de base</a>
              <ul class="dropdown-menu">
                <li> <a class="dropdown-item" href="../Les-besoins-alimentaires-du-chien.html">Les besoins alimentaires du chien</a> </li>
                <li> <a class="dropdown-item" href="../La-transition-alimentaire-du-chien.html">La transition alimentaire du chien</a> </li>
                <li> <a class="dropdown-item" href="../Alimentation-croissance-et-santé.html">Alimentation, croissance et santé</a> </li>
                <li> <a class="dropdown-item" href="../La-saveur-des-aliments.html">La saveur des aliments</a> </li>
                <li> <a class="dropdown-item" href="../Rôle-des-nutriments.html">Rôle des nutriments</a> </li>
                <li> <a class="dropdown-item" href="../Rôle-des-acides-gras.html">Rôle des acides gras</a> </li>
                <li> <a class="dropdown-item" href="../Allergie-alimentaire.html">Allergie alimentaire</a> </li>
                <li> <a class="dropdown-item" href="../Changer-de-marque-sans-grève-de-la-faim.html">Changer de marque sans grève de la faim</a> </li>
                <li> <a class="dropdown-item" href="../Dilatation-torsion-d-estomac.html">Dilatation torsion d'estomac</a> </li>
                <li> <a class="dropdown-item" href="../Obésité-une-influence-génétique-complexe.html">Obésité, une influence génétique complexe</a> </li>
                <li> <a class="dropdown-item" href="../Les-besoins-en-eau-d-un-chien.html">Les besoins en eau d'un chien</a> </li>
                <li> <a class="dropdown-item" href="../L-alimentation-de-votre-chien.html">L'alimentation de votre chien</a> </li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Santé et bien-être</a>
          <ul class="dropdown-menu">
            <li> <a class="dropdown-item" href="../Guide-des-Bonnes-Pratiques.html">Guide des bonnes pratiques</a> </li>
            <li class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">Suivi de santé Dépistage des affections</a>
              <ul class="dropdown-menu">
                <li> <a class="dropdown-item" href="../L'offre-génomique-de-la-SCC.html">L'offre génomique de la SCC</a> </li>
                <li> <a class="dropdown-item" href="../Le-dépistage-des-tares-oculaires.html">Le dépistage des tares oculaires</a> </li>
              </ul>
            </li>
            <li class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">Maladies héréditaires</a>
              <ul class="dropdown-menu">
                <li> <a class="dropdown-item" href="../L-anomalie-de-l-oeil-du-Colley.html">L'anomalie de l'oeil du Colley</a> </li>
                <li> <a class="dropdown-item" href="../Dysplasie-de-la-rétine.html">La Dysplasie de la rétine</a> </li>
                <li> <a class="dropdown-item" href="../La-Cardiomyopathie-dilatée.html">La Cardiomyopathie dilatée</a> </li>
                <li> <a class="dropdown-item" href="../La-cataracte.html">La cataracte</a> </li>
                <li> <a class="dropdown-item" href="../La-cécité-nocturne.html">La cécité nocturne</a> </li>
              </ul>
            </li>
            <li class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">Autres affections de votre chien</a>
              <ul class="dropdown-menu">
                <li> <a class="dropdown-item" href="../L-acidurie.html">L'Acidurie</a> </li>
                <li> <a class="dropdown-item" href="../Adénite-sébacée.html">L'Adénite sébacée</a> </li>
                <li> <a class="dropdown-item" href="../Les-Anomalies-Vertébrales.html">Les anomalies vertébrales</a> </li>
                <li> <a class="dropdown-item" href="../Arthrose-et-activité-physique.html">Arthrose et activité physique</a> </li>
                <li> <a class="dropdown-item" href="../Les-boiteries.html">Les boiteries</a> </li>
                <li> <a class="dropdown-item" href="../Le-cancer-de-la-peau.html">Le cancer de la peau</a> </li>
                <li> <a class="dropdown-item" href="../Le-cancer-de-la-langue.html">Le cancer de la langue</a> </li>
                <li> <a class="dropdown-item" href="../Les-chenilles-processionnaires.html">Les chenilles processionnaires</a> </li>
                <li> <a class="dropdown-item" href="../Dépigmentation-de-la-truffe.html">Dépigmentation de la truffe</a> </li>
                <li> <a class="dropdown-item" href="../Comment-gérer-son-diabète.html">Comment gérer son diabète</a> </li>
                <li> <a class="dropdown-item" href="../Prostate-et-hyperplasie-bénigne.html">Prostate et hyperplasie bénigne (HBP)</a> </li>
              </ul>
            </li>
            <li class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">Service ADN</a>
              <ul class="dropdown-menu">
                <li> <a class="dropdown-item" href="../Les-tests-génomiques.html">Les tests génomiques</a> </li>
                <li> <a class="dropdown-item" href="../L'offre-génomique-de-la-SCC.html">L'offre génomique de la SCC</a> </li>
                <li> <a class="dropdown-item" href="../Du-nouveau-dans-les-tests.html">Du nouveau dans les tests</a> </li>
                <li> <a class="dropdown-item" href="../ADN-Identification-et-filiation.html">ADN, Identification et filiation</a> </li>
                <li> <a class="dropdown-item" href="../Tests-Petits-rappels.html">Tests, Petits rappels</a> </li>
                <li> <a class="dropdown-item" href="../Tests-Les-bonnes-questions.html">Tests, Les bonnes questions</a> </li>
                <li> <a class="dropdown-item" href="../Tests-Test-de-santé-ou-Test-confort.html">Tests, Test de santé ou Test confort</a> </li>
                <li> <a class="dropdown-item" href="../Quels-tests-de-confort-pour-mon-chien.html">Quels tests de confort pour mon chien</a> </li>
                <li> <a class="dropdown-item" href="../Identification-Génétique.html">Identification Génétique</a> </li>
                <li> <a class="dropdown-item" href="../Identification-les-cas-particuliers.html">Identification, les cas particuliers</a> </li>
                <li> <a class="dropdown-item" href="../Formulaires-de-commande.html">Formulaires de commande</a> </li>
                <li> <a class="dropdown-item" href="../Le-stand-ADN-dans-les-expositions.html">Le stand ADN dans les expositions</a> </li>
              </ul>
            </li>
            <li> <a class="dropdown-item" href="../Le-syndrome-brachycéphale-et-le-Breath.html">Le syndrome brachycéphale et le BREATH</a> </li>
            <li> <a class="dropdown-item" href="../Lexique-des-abréviations-santé.html">Lexique des abréviations santé</a> </li>
            <li> <a class="dropdown-item" href="../Vaccination.html">Vaccination</a> </li>
            <li> <a class="dropdown-item" href="../La-Dysplasie-du-coude.html">La Dysplasie du coude</a> </li>
            <li> <a class="dropdown-item" href="../La-beauté-du-poil.html">La beauté du poil</a> </li>
            <li> <a class="dropdown-item" href="../veterinaires/a.html">Vétérinaires</a> </li>
            <li> <a class="dropdown-item" href="../Lui-administrer-un-médicament.html">Lui administrer un médicament</a> </li>
          </ul>
        </li>
        <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Nos amis</a>
          <ul class="dropdown-menu">
            <li> <a class="dropdown-item" href="../Refuges-SPA.html">Refuges SPA</a> </li>
            <li> <a class="dropdown-item" href="../Chiens-perdus.html">Chiens perdus</a> </li>
            <li> <a class="dropdown-item" href="../Chiens-trouvés.html">Chiens trouvés</a> </li>
            <li> <a class="dropdown-item" href="../Adopter-un-chien-a-la-SPA.html">Adopter un chien a la SPA</a> </li>
            <li> <a class="dropdown-item" href="../Petites-annonces.html">Petites annonces</a> </li>
            <li> <a class="dropdown-item" href="../Eleveurs-recommandés.html">Eleveurs recommandés</a> </li>
          </ul>
        </li>
        <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Partenariat</a>
          <ul class="dropdown-menu">
            <li> <a class="dropdown-item" href="../Definition-du-programme.html">Definition du programme</a> </li>
            <li> <a class="dropdown-item" href="../Pourquoi-devenir-partenaire.html">Pourquoi devenir partenaire</a> </li>
            <li> <a class="dropdown-item" href="../Partenaires.html">Partenaires</a> </li>
            <li> <a class="dropdown-item" href="../Offre-de-partenariat.html">Offre de partenariat</a> </li>
            <li> <a class="dropdown-item" href="../Demande-de-partenariat.html">Demande de partenariat</a> </li>
            <li> <a class="dropdown-item" href="../Programme-d-essai.html">Programme d'essai</a> </li>
            <li> <a class="dropdown-item" href="../a_propos.html">A propos</a> </li>
            <li> <a class="dropdown-item" href="../contact.html">Contact</a> </li>
          </ul>
        </li>
      </ul>
      <form method="post" action="">
        <div class="input-group">
          <input class="form-control" type="text" placeholder="Search" aria-label="Search" aria-describedby="button-addon-Search">
          <button class="btn btn-outline-secondary" type="submit" id="button-addon-Search">Aller</button>
        </div>
      </form>
    </div>
  </nav>
  <img src="../Images/communes/fond1.png" alt="" class="image_responsive" width="1575" height="325" style="width:100%;max-width:100%;"> 
  <!-- Debut Breadcrumb --> 
  <!-- Fin Breadcrumb --> 
</header>
<!------------- DEBUT CONTENU --------------> 
<!---Debut menu groupe -->
<select name="pets" id="pet-select" onchange="if(this.value!=''){ window.location.href = this.value }; return false;">
    <option value="">--Cboisissez un groupe--</option>
    <option value="#">Groupe 1 : premier groupe</option>
    <option value="https://sos-chiens-dordogne.fr/listing_races/Groupe2.html">Groupe 2 : deuxieme groupe</option>
    <option value="https://sos-chiens-dordogne.fr/listing_races/Groupe3.html">Groupe 3 : troisieme groupe</option>
    <option value="https://sos-chiens-dordogne.fr/listing_races/Groupe4.html">Groupe 4 : quatrieme groupe</option>
    <option value="https://sos-chiens-dordogne.fr/listing_races/Groupe5.html">Groupe 5 : cinquieme groupe</option>
    <option value="https://sos-chiens-dordogne.fr/listing_races/Groupe6.html">Groupe 6 : sixieme groupe</option>
	<option value="https://sos-chiens-dordogne.fr/listing_races/Groupe7.html">Groupe 7 : septieme groupe</option>
	<option value="https://sos-chiens-dordogne.fr/listing_races/Groupe8.html">Groupe 8 : huitieme groupe</option>
	<option value="https://sos-chiens-dordogne.fr/listing_races/Groupe9.html">Groupe 9 : neuvieme groupe</option>
	<option value="https://sos-chiens-dordogne.fr/listing_races/Groupe10.html">Groupe 10 : dixieme groupe</option>
</select>
<!---Fin menu groupe -->
<!-- Fin navigation centre -->
 
<!-- Debut indication nombre -->	
<div class="flex-container7">	
	<p class="h2">83 races correspondent à votre saisie</p>
	</div>
<!--Fin indication nombre -->
 
 
	<!-- Debut tableau recherche -->
	<div class="flex-container">
  <div class="flex-item1">
	<table class="tablerecherche">
     <tr>
      <td><b>Recherche :</b></td>
    </tr>
	<tr>
      <td><a href="AlphabetA.html"><img src="../Images/Icones/abc.png" alt= "Alphabetique"></a></td>
    </tr>
		<tr>
      <td><a href="http://ton lien"><img src="../Images/Icones/chien.png" alt= ""></a></td>
    </tr>
	 <tr>
      <td><a href="a.html"><img src="../Images/Icones/loupe.png" alt= ""></a></td>
    </tr>
	 <tr>
      <td><a href="Groupe1.html"><img src="../Images/Icones/niche.png" alt= "Par groupe"></a></td>
    </tr>	
	</table>
  </div>
	<!-- Fin tableau recherche -->
	<!-- Debut tableau races -->
<!------------- FIN CONTENU -------------->
<!-- Remove the container if you want to extend the Footer to full width. -->
<div class="container my-">
    <footer class="text-center text-lg-start border border-white mt-xl-5 pt-4">
    <!-- Grid container -->
    <div class="container p-4">
      <!--Grid row-->
      <div class="row">
        <!--Grid column-->
        <div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
          <h5 class="text-uppercase mb-4">L'univers du chien</h5>
          <ul class="list-unstyled mb-4">
            <li>
              <a href="../Documents-genealogiques.html" class="text-black">Les documents généalogiques</a>
            </li>
            <li>
              <a href="../Carte-d-identification.html" class="text-black">La carte d'identification</a>
            </li>
            <li>
              <a href="../Passeport-européen.html" class="text-black">Le passeport européen</a>
            </li>
            <li>
              <a href="../chien-de-race.html" class="text-black">Le chien de race</a>
            </li>
          </ul>
        </div>
         <!--Grid column-->
        <div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
          <h5 class="text-uppercase mb-4">Votre chien et vous</h5>
           <ul class="list-unstyled">
            <li>
              <a href="../Droits-et-Devoirs.html" class="text-black">Droits de l'animal et devoirs de l’homme</a>
            </li>
            <li>
              <a href="../Bébé-arrive.html" class="text-black">Bébé arrive, comment gérer</a>
            </li>
            <li>
              <a href="../Jamais-sans-mon-chien.html" class="text-black">Jamais sans mon chien</a>
            </li>
            <li>
              <a href="../Dormir-avec-son-animal.html" class="text-black">Dormir avec son animal</a>
            </li>
            <li>
              <a href="../A-quoi-rêve-votre-chien.html" class="text-black">A quoi rêve votre chien</a>
            </li>
          </ul>
        </div>
         <div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
          <h5 class="text-uppercase mb-4">Assistance</h5>
           <ul class="list-unstyled">
            <li>
             <a href="../conditions-generales-dutilisation.html" class="text-black">Conditions générales</a>
            </li>
            <li>
              <a href="../Données_personnelles.html" class="text-black">Données personnelles</a>
            </li>
            <li>
              <a href="../a_propos.html" class="text-black">A propos</a>
            </li>
            <li>
              <a href="../acces_restreint.html" class="text-black">Connexion</a>
            </li>
            <li>
              <a href="../contact.html" class="text-black">Contact</a>
            </li>
          </ul>
        </div>
 <!--Grid column-->
        <div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
          <h5 class="text-uppercase mb-4">Abonnez-vous a notre newsletter</h5>
          <div class="form-outline form-white mb-4">
            <input type="email" id="form5Example2" class="form-control" />
            <label class="form-label" for="form5Example2">Adresse mail</label>
          </div>
          <button type="submit" class="btn btn-outline-white btn-block">Souscrire</button>
        </div>
        <!--Grid column-->
      </div>
      <!--Grid row-->
    </div>
    <!-- Grid container -->
   <!-- Copyright -->
    <div class="text-center p-3 border-top border-white">
      © 2020 SOS Chiens Dordogne Copyright:
      <a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>
    </div>
    <!-- Copyright -->
  </footer>
   </div>
<!-- End of .container -->
</body>
</html>

**NoSmoking** · 10/08/2022, 08h19

Bonjour,
il serait peut-être utile de (re)lire la documentation qui est très riche d'enseignements.

Dans la zone de recherche, il suffit de taper center pour accéder à cette page : Center elements.

Il te suffit donc de faire quelque chose comme :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<p class="text-center">  <!-- conteneur avec texte centré -->
  <select name="pets" id="pet-select">
    <option value=""> Choix</option>
    <option value="1">Groupe 1</option>
    <option value="2">Groupe 2</option>
    <option value="3">Groupe 3</option>
    <!-- ... -->
    <option value="n">Groupe n</option>
  </select>
</p>

**Media20** · 10/08/2022, 15h57

Bonjour a toutes et a tous..
Mille fois merci
Cdt

[BootStrap] Centrer une élément SELECT

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager