HTML: Come centrare allineare un modulo

Ho il seguente codice HTML e voglio centrare allineare il mio modulo.HTML: Come centrare allineare un modulo

<form action="advsearcher.php" method="get"> 
    Search this website:<input align="center" type="text" name="search" /> 
    <input type="submit" value="Search"/> 
</form>

Come posso fare? Grazie in anticipo.

fonte

2012-03-16 Marcus Tik

Essendo form un elemento di blocco, è possibile centrare-allinearlo impostando i suoi margini laterali per l'auto:

form { margin: 0 auto; }

EDIT:
Come @moomoochoo giustamente osservato, questa regola funziona solo se l'elemento di blocco (il tuo modulo, in questo caso) è stato assegnato ad una larghezza specifica.
Inoltre, questo "trucco" non funzionerà per gli elementi mobili.

fonte

2012-03-16 12:42:14 Lucius

@Lucius e @zyrolasting hanno ragione.

Tuttavia, è necessario fornire al modulo uno width specificato affinché funzioni correttamente.

form { 
margin: 0 auto; 
width:250px; 
}

fonte

2012-03-16 12:49:13 TryHarder

hai ragione .. Ho preso quel per scontato. Colpa mia! – Lucius

Grazie ... aggiungendo l'opzione 'auto' ha fatto il trucco – user602599

Basta mettere un po 'di CSS nel foglio di stile come questo

form { 
    text-align: center; 
}

allora il gioco è fatto!

fonte

2013-02-23 20:35:13 mads

@JohannBehrens: Perché è esattamente una cattiva pratica? – favq

@anonymous: vorrete separare la semantica e il design l'uno dall'altro utilizzando SOLO HTML in un file .html e SOLO CSS in un file .css. Rende il tuo codice pulito e strutturato, leggibile per altri sviluppatori o designer, a prova di futuro e potrei andare avanti molto più a lungo. –

text-align: center works. Basta usarlo in un file CSS e tutto va bene. È possibile utilizzare anche

nell'HTML, ma come sottolineato da @JohannBehrens, lo stile deve essere separato. Morever è obsoleto. La mia scommessa migliore è l'allineamento del testo: centro in un foglio di stile sul tag del modulo. –

Uso center:

<center><form></form></center>

Questo è solo un metodo, anche se non è advised.

fonte

2014-03-03 01:39:07 Cilan

è obsoleto poiché HTLM 4 – epox

@epox come spiegato nel collegamento – Cilan

#form{ 
    position:fixed; 
    top:50%; 
    left:50%; 
    width:250px; 
}

È possibile regolare in alto a sinistra & a seconda delle dimensioni modulo.

fonte

2014-04-04 03:54:02 Machinerium

<center><form></form></center>

funziona nella maggior parte dei casi come il Wobbuffet di cui sopra ...

fonte

2014-04-23 15:08:42 carlstarus

-1 "

" è deprecato. 1. [W3Schools] (https://www.w3schools.com/tags/tag_center.asp) 2. [Mozilla] (https://developer.mozilla.org/en-US/docs/Web/HTML/Elemento/centro) –

-1

modo semplice: aggiungere un tag "centro" prima che il modulo tag

fonte

2016-12-12 12:41:48 Akshay

Il centro è obsoleto. –

Prova questo: Impostare la larghezza della modulo del 20% di:
width : 20%;
ora se l'intero canvas è 100%, il centro è al 50%. Quindi, per allineare il centro della forma al centro, 50- (20/2) = 40. quindi impostare il margine sinistro del 40% in questo modo:
left : 40%;

fonte

2017-01-04 03:31:15 dcube

HTML: Come centrare allineare un modulo

risposta

Problemi correlati