### [Come centrare un modulo](https://wpforms.com/developers/how-to-center-a-form/)
**Pubblicato:** 6 novembre 2020
**Autore:** Umair Majeed
**Estratto:** Questo tutorial ti mostrerà come usare il CSS per centrare un modulo con WPForms.
**Contenuto:**
Vuoi centrare i tuoi moduli nelle pagine di WordPress? Mentre i moduli WPForms hanno una larghezza predefinita del 100% del loro contenitore, puoi facilmente centrarli usando CSS personalizzato.
Questa guida ti mostrerà come centrare perfettamente i tuoi moduli e i loro elementi.
## Impostazione del modulo
Per prima cosa, dovrai creare il tuo modulo. Se hai bisogno di aiuto con questo, puoi sempre [consultare questa documentazione per assistenza](https://wpforms.com/docs/creating-first-form/ "Creazione del tuo primo modulo").
Una volta creato il tuo modulo e aggiunti i campi, dovrai impostare ogni **Dimensione campo** su **Grande**.
Per farlo, fai clic sulla scheda **Avanzate** e seleziona **Grande** dal menu a discesa **Dimensione campo**.
### Aggiunta della classe CSS
Dopo aver impostato la dimensione del campo su Grande, dovrai aggiungere una classe CSS speciale. Per farlo, apri il generatore di moduli e vai su **Impostazioni » Generali**. Quindi scorri verso il basso fino alla sezione **Avanzate** e individua il campo **Classe CSS del modulo**. Inserisci `wpf-center` in questo campo.
**Nota:** Il passaggio della classe CSS è fondamentale: senza di esso, il CSS di centratura non funzionerà. Assicurati di inserire il nome della classe esattamente come mostrato.
## Aggiunta del codice CSS
Ecco il codice CSS di base per centrare il tuo modulo:
Nota: Per aiuto nell'aggiungere CSS al tuo sito, [dai un'occhiata a questo tutorial.](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Come aggiungere stili CSS personalizzati per WPForms")
Questo codice:
- Centra il modulo usando `margin: 0 auto`
- Imposta una larghezza massima di 500px. Puoi giocare con questa quantità finché non trovi quella che soddisfa le tue esigenze
- Garantisce la reattività mobile regolando la larghezza sugli schermi più piccoli
## Centratura di tutti gli elementi del modulo
Se vuoi centrare tutto all'interno del modulo (etichette, descrizioni, pulsanti), usa questa versione estesa:
## Personalizzazione della larghezza
Per regolare la larghezza del modulo, modifica queste due righe nel CSS:
```
max-width: 500px !important;
width: 500px !important;
```
Sostituisci `500px` con la larghezza desiderata. Ad esempio, per un modulo più largo:
```
max-width: 800px !important;
width: 800px !important;
```
## Domande frequenti
#### D: Perché il CSS non funziona per me?
**R:** Innanzitutto, verifica di aver aggiunto il nome della classe `wpf-center` nella pagina **Impostazioni » Generali** del tuo modulo. Questo è il motivo più comune per cui il CSS non funziona. Se ancora non funziona, cancella la cache del tuo browser e aggiorna la pagina.
#### D: Come faccio a centrare solo il pulsante di invio?
**R:** Usa questo CSS semplificato e aggiungi la classe `wpf-center-button` (invece di `wpf-center`) al campo Classe CSS del tuo modulo:
Successivamente, aggiungi questo CSS al tuo sito.
```
.wpforms-container.wpf-center-button .wpforms-submit-container {
text-align: center;
}
```
E questo è tutto ciò che ti serve per centrare il tuo modulo. Successivamente, vorresti poter cambiare il colore del pulsante di invio sui tuoi moduli? Dai un'occhiata al nostro articolo su [come cambiare il colore del pulsante di invio](https://wpforms.com/developers/how-to-change-the-submit-button-color/).
**Categorie:** Stile
**Tag:** CSS
---