Nwlapcug.com


Posso galleggiare un div strato al centro con CSS?

Dopo il rilascio di 4 HTML (hypertext markup lingua), alcuni tag precedenti sono state considerate obsolete come mezzo più funzionale per raggiungere gli stessi risultati di Tag più recenti. Il tag "< center >" è stato sostituito con valori di CSS style sheets (CSS). Mentre è possibile utilizzare la proprietà "float" per spostare un livello div a destra o a sinistra, questa struttura non offre un modo per centrare l'oggetto.

CSS Float

Galleggianti CSS sono proprietà che è possibile applicare agli elementi. Frequentemente, si applicherebbe un galleggiante a un'immagine, ad esempio. Tuttavia, è possibile applicarlo ai contenitori quali tabelle o div strati pure. Elementi mobili spostare orizzontalmente o a sinistra o a destra dello schermo. Elementi circondato gli elementi mobili, ad esempio testo, sarà anche mossa sullo stesso lato dello schermo, se non diversamente specificato.

La sintassi per un div a virgola mobile è simile al seguente:

< div style = "float: giusto" >

Valori di float

La proprietà float CSS dispone attualmente di quattro valori. Quando hai lasciato galleggiare un oggetto, si sposterà al flusso di sinistra e di altri elementi intorno ad esso. Galleggianti destra ha lo stesso comportamento, ma si sposta a destra. Se si imposta il valore float per un elemento su "none" apparirà nella sua posizione normale. Così, non è necessario utilizzare questa proprietà. Un oggetto erediterà il suo valore float dal relativo elemento padre o contenitore se si imposta il valore di "ereditare". Non c'è nessun valore float "centro".

Centrare un div

Mentre è Impossibile centrare un div con la proprietà float..--e anche se si potrebbe, il browser non sarebbe in grado di visualizzare contenuto che scorre su entrambi i lati..--è possibile utilizzare altri metodi per centrare il vostro livello. Un metodo comune implica l'impostazione i margini destro e sinistro su "auto" come nella seguente sintassi:

< div style = "margin-left: auto; margine destro: auto ">

Mentre questo metodo non funziona se si è già specificato un margine sinistro o destro, è possibile considerare di mettere il vostro div in un contenitore che è centrato e quindi ulteriormente posizionare un secondo strato all'interno del primo.

Centraggio div contenuto

La proprietà "text-align" consente di controllare l'allineamento del testo all'interno di qualsiasi elemento. È più facile centrare il contenuto, inclusi elenchi, testi, link e immagini, all'interno di un div che è al centro del div stesso. Si consideri la seguente sintassi, che sostituirebbe l'uso del ora-deprecato "< centro >" tag HTML:

< div style = "text-align: center" >< / div >

È inoltre possibile applicare testo centrato per singoli elementi all'interno del div o per specifici blocchi di testo che li circonda con il tag "< span >".