Discussion :

[maxtrident]

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 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
<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 :

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
.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

[unanonyme]

faites une grid.

[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.

[NoSmoking]

Bonjour,

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 ?

[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.

[unanonyme]

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
<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 html :

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

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>

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

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
<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>

[maxtrident]

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