Centrer des buttons

Version imprimable

1 pièce(s) jointe(s)

Centrer des buttons

bonjour
je n'arrive pas à centrer des boutons; il y en a qui se décale quand il y a 2 lignes et ne vois pas pourquoi.

html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<nav class="menuser">
<form method="POST"  action="mon_compte">
 <input type="hidden" name="modif" value="modif"/>
<button class="buthoriz2" type="submit">Modifier mon compte</button>
</form>
 
<form method="POST"  action="mon_compte">
 <input type="hidden" name="mesanosav" value="mesanosav"/>
<button class="buthoriz2" type="submit">Mes pages Sauvegardées</button>
</form>
 
<form method="POST"  action="mon_compte">
<input type="hidden" name="comenta" value="comenta"/>
<button class="buthoriz2" type="submit">Mes Commentaires</button>
</form>
</nav>

css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.menuser{
	width:100%;
	text-align:center;
	margin-bottom:.1em;
}
.menuser button.buthoriz2{
 
width:150px;
height:40px;
list-style:none;
padding:4px;
font-size:1.1em;
color:black;
margin:.1em;
text-decoration:none;
text-shadow: none;
font-weight:normal;
 font-family:Calibri, Times, "Times New Roman", serif;
 border-radius:5px;
   border: 1px solid #002538;
}

résultat
Pièce jointe 650603

10/02/2024, 17h02
unanonyme

faites une grid.
10/02/2024, 17h27
maxtrident

le grid c'est une galère: il faut mettre des div à chaque form et après encore modifier pour le rendre responsive et bouton en hover ça ne va pas être triste.
le centrage fonctionne mais ces le décalage quand il y a 2 lignes... c'est la balise bouton qui fait ça ?
en mettant un float left: je n'ai plus de décalage mais pas centrer.
10/02/2024, 17h48
NoSmoking

Bonjour,

Citation:

le grid c'est une galère: il faut mettre des div à chaque form et après encore modifier pour le rendre responsive et bouton en hover ça ne va pas être triste.

absolument pas mais ici il me semble que la mise en place d'un layout FLEX serait plus judicieuse.

Souhaites-tu avoir tous tes boutons de la même hauteur ?
10/02/2024, 18h22
maxtrident

bonjour
oui des boutons de la même hauteur et même largeur.
J'ai jamais réussi en flex à centrer quand il y a beaucoup de div ou button sur plusieurs lignes...je serais curieux de voir comme tu fais.

1 pièce(s) jointe(s)

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
<div>
  <button>a</button>
  <button>b</button>
  <button>Modifier mon compte</button>
  <button>d</button>
  <button>e</button>
  <button>f</button>
  <button>g</button>
  <button>h</button>
  <button>i</button>
  <button>j</button>
  <button>Mes pages Sauvegardées</button>
  <button>l</button>
</div>
<style>
div {
  text-align:center;
}
button {
  min-width:90px;
  display:inline-block;
  vertical-align: middle;
  padding:5px;
  height:45px;
  margin:5px;
}
</style>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
button {
  min-width:90px;
  padding:5px;
  height:45px;
  margin:5px;
}
</style>

Pièce jointe 650613

En effet, la grille, ce n'est pas le plus pratique.. je passe sur les explications.

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
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
<div>
  <button>a</button>
  <button>b</button>
  <button>Modifier mon compte</button>
  <button>d</button>
  <button>e</button>
  <button>f</button>
  <button>g</button>
  <button>h</button>
  <button>i</button>
  <button>j</button>
  <button>Mes pages Sauvegardées</button>
  <button>l</button>
  <button>l</button>
</div>
 
<style>
div {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
}
 
button:last-child:nth-child(8n - 4) {
  background: yellow;
}
 
button:nth-last-child(4):nth-child(8n + 1) {
  background: blue;
  grid-column-start: 3;
}
button:nth-last-child(5):nth-child(8n + 1) {
  background: blue;
  grid-column-start: 2;
}
button:nth-last-child(6):nth-child(8n + 1) {
  background: blue;
  grid-column-start: 2;
}
 
@media (max-width: 20px) {
  div {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
  }
 
  button:nth-last-child(2):nth-child(5n + 1) {
    background: blue;
    grid-column-start: 2;
  }
  button:nth-last-child(3):nth-child(5n + 1) {
    background: blue;
    grid-column-start: 2;
  }
  button:nth-last-child(4):nth-child(5n + 1) {
    background: blue;
    grid-column-start: 1;
  }
}
</style>

11/02/2024, 09h58
maxtrident

merci, il me manquait flex-wrap quand j'avais testé.;)