[HTML] centrer un bouton dans un form

Code:

---

1 2 3 4 5 6 7 8

<td> <form id="interventionForm" action="{$BASE_URL}/dossiers/cloreDevTermine/{$dossier.Dossier.id_dossier}" method="post" enctype="multipart/form-data"> <div class=buttons> <center><input type="submit" value="{#ButtonDevTerminé#}" /></center> </div> </form> </td>

---

J'aimerais savoir comment peut t on centrer un bouton dans un formulaire car avec les balises center cela ne fonctionne pas?

Bonjour,

Question de CSS et non pas de html ;)

Il faut jouer avec les propriétés margin : 0,auto et avoir donné une taille au conteneur de l'élément en question

Attention l'élément center est un des élément déconseillés et invalide en
XHTML et HTML strict. Le remplacer soit par des marges auto au niveau de
l'élément à centrer, soit par un text-align:center sur le conteneur à
condition ce l'élément à centrer soit de niveau inline, ce qui est le cas ici.

Ton problème vient du fait que tu as oublié les guillements entourant la valeur:

class="buttons"

Corriger ça, supprimer l'élement center et mettre un text-align:center à ta classe buttons.


@Mimicracra Les marge auto ne sont appliquées qu'à des éléments de
niveau bloc (et plus généralement à des boîtes de bloc).
Il faudrait donc ici ajouter un display:block à l'input mais la solution que je propose est plus simple et moins lourde.

Citation:

---

Envoyé par Erwan31

Ton problème vient du fait que tu as oublié les guillements entourant la valeur:
class="buttons"
Corriger ça et mettre un text-align:center à ta classe buttons.

---

+ 1 ! ;)

ben ca ne fonctionne pas pourtant j'ai mis dans mon css

Code:

---

1 2	#interventionForm div.boutons imput {text-align: center;}

---

Et

Code:

---

1 2 3 4 5 6

<form id="interventionForm" action="{$BASE_URL}/dossiers/cloreDevTermine/{$dossier.Dossier.id_dossier}" method="post" enctype="multipart/form-data"> <div class="boutons"> <input type="submit" value="{#ButtonDevTerminé#}" /> </div> </form>

---

Bonjour,

Citation:

---

#interventionForm div.boutons imput {text-align: center;}

---

tout est là ;)

je te conseille :

Code:

---

1 2	#interventionForm .boutons input {text-align: center;}

---

J'ai essayé mais cela ne fonctionne toujours pas.

Et avec ça? (autrement dit en appliquant le text-align sur le div et non sur le input)

Code:

---

#interventionForm .boutons {text-align: center;}

---

J'ai changé mon nom de form.

Le truc que je comprend pas c'est que quand je modifie la taille de l'input cela fonctionne correctement mais quand il faut le centrer dans la colonne du tableau ca ne fait rien du tout.

Code:

---

1 2	#devTermineForm input { width:95%;text-align:center;}

---

En fait ca marche sur internet explorer mais pas sur mozilla!

Si j'enleve les balises form ca fonctionne.
Pourquoi?

Oh là là! Le text-align n'était pas à appliquer à l'input (voir la remarque de NikoGJ) mais à son conteneur.

Ben voila la solution

Dans le css

Code:

---

1 2	#devTermineForm td {text-align: center}

---

et dans l 'autre fichier

Code:

---

1 2 3 4 5 6 7 8

<form id="devTermineForm" action="{$BASE_URL}/dossiers/cloreDevTermine/{$dossier.Dossier.id_dossier}" method="post" enctype="multipart/form-data"> <td> <div class="boutons"> <input type="submit" title="{#ButtonDevTermineAide#}" value="{#ButtonDevTermine#}" /> </div> </td> </form>

---