CSS Absolute Position Center
Esempio n. 1: centro di posizione assoluto in orizzontale
Faremo tutti questi esempi nel codice Visual Studio. Dobbiamo creare il file HTML nel nostro codice Visual Studio e iniziare a scrivere il codice su di esso. Dopo aver completato il codice fornito nell'immagine, è necessario salvare questo file con ".Estensione del file HTML "in quanto è un file" html ".
Menziona il tipo di documento "HTML" come sappiamo che è un codice HTML. Quindi, apri "" e "". Il meta è definito di seguito, che è "chatset = UTF-8", che consente di accedere a caratteri diversi. Colleghiamo anche questo file corrente con il file CSS in cui facciamo un po 'di stile e utilizziamo la proprietà di posizione assoluta. Per descrivere l'associazione, "Rel" è qui; Il tipo è "testo/css" e "href" in cui passiamo il nome del file. Colleghiamo il "Centerstyle.CSS ”con questo file corrente. Ora, dopo aver chiuso il "" useremo il "". Abbiamo una voce nel corpo e una classe "div" con il nome "elemento". Finalmente, dobbiamo chiudere tutti i tag in sequenza. Innanzitutto, chiudi "div", "corpo" e poi i tag "html".
Codice CSS
Ecco il file CSS. Quando crei questo file, usi ".Estensione del file CSS ”in quanto è il nostro file CSS. Devi ricordare di aver salvato questo file con lo stesso nome che hai menzionato nel tuo file HTML. Ora qui, modelleremo questa classe di elementi usando proprietà diverse. Posto "."E scrivi" elemento "in quanto è il nome della classe" Div ". Regoviamo rispettivamente "altezza" e "larghezza" come "100px" e "200px". Metti "arancione" come colore di sfondo. E bianco per il colore del carattere. Ora useremo la proprietà "Posizione assoluta". Imposta "posizione" come "assoluto". Dal "sinistra" è "0" e da "destra" è impostato come "0". Qui, i margini superiore e inferiore sono "0" e la sinistra; I margini giusti sono "auto". Viene utilizzato questo margine automatico sinistro e destro, quindi ci vuole il margine automatico per dare la larghezza dell'oggetto.
L'uscita viene visualizzata sul browser. Premere "Alt+ B "sul file HTML per mostrare l'output. Incoriamo anche l'output del codice HTML e CSS di cui sopra.
Produzione
Esempio n. 2: centro di posizione assoluto in verticale
In questo esempio, stiamo usando lo stesso file HTML che abbiamo creato nell'esempio precedente. Basta cambiare l'intestazione da "Absolute Position Center orizzontalmente" a "Absolute Position Center verticalmente".
Qui, abbiamo impostato il colore dello sfondo su "viola". Quando dobbiamo impostare la posizione assoluta centrata in verticale, allora mettiamo la posizione su "Absolute" e qui menzioniamo "Top: 0" e "In basso: 0". Abbiamo anche impostato il margine per questa "auto" per "top" e "bottom". Il valore "0" è impostato per "a sinistra" e "a destra". Puoi anche controllare l'output di questo esempio, che abbiamo incollato di seguito.
Produzione
In questo output, la scatola viene posizionata verticalmente al centro utilizzando la proprietà di posizione assoluta. In questa immagine, lo spazio tra il testo e la casella mostra che è posizionato al centro in posizione verticale.
Esempio n. 3: centro di posizione assoluto sia orizzontalmente che verticalmente
Nel nostro terzo esempio, imposteremo l'oggetto nella posizione centrale assoluta. Qui, l'oggetto è centrato dalla verticale e anche dalla posizione orizzontale. Proviamo questo terzo esempio.
Qui, dall'inizio, il codice è lo stesso di cui abbiamo discusso nel nostro esempio precedente. Abbiamo appena cambiato il codice dal tag "". Creiamo una classe di "div" usando "contenitore" come nome della classe. Prima di chiudere questo tag "Div", creiamo un'altra "classe Div" e questa volta, il nome è "dati". Crea un'intestazione usando il "
"Tag e scrivi anche un paragrafo all'interno dei tag" ". Quindi utilizzare i tag di chiusura per entrambi i tag "".
Codice CSS
Nel codice CSS, in primo luogo, apri le staffe per il paragrafo che è scritto all'interno della classe container. L '"altezza" di questo contenitore è "60px" e la "larghezza" è anche "60px". Applichiamo l'imbottitura qui come "10px" in modo che genererà uno spazio "10px" tra il contenuto e il bordo. Qui la posizione del testo è "relativa". Vogliamo disegnare il bordo attorno al contenitore o alla scatola, quindi stiamo usando la proprietà "bordo" per questo. Abbiamo impostato la larghezza del "bordo" come "3px", il tipo di bordo è "solido" e il colore di questo bordo è "verde". Quindi, quando mostriamo questo sul browser, il bordo sarà di colore verde, solido e anche di larghezza "3px". Usiamo "rosa" come colore di sfondo. E selezionare "nero" per il carattere. Quindi, il carattere o il testo verranno visualizzati in colore "nero". Ora, qui utilizziamo la proprietà "Absolute Position Center" e imposterà l'oggetto e si dirigerà al centro dello schermo.
Produzione
Esempio # 4
Qui, incollamo il codice di HTML di seguito per questo esempio. Usiamo il codice sopra e creiamo piccole modifiche in esso. Rimuoviamo solo la classe di dati del paragrafo e Div in questo esempio e creiamo un altro file CSS per questo esempio.
Codice CSS
L '"altezza" del contenitore in questo esempio è "70px" e "la larghezza" è "300px". Usa la "posizione" come "assoluto". Ora stiamo disegnando il bordo in cui impostiamo la sua "larghezza" uguale a "4px", il bordo visualizzerà "solido", poiché il tipo di questo bordo è selezionato come "solido". Il colore è "nero". Quindi, imposta il colore di sfondo interno su "bianco". Il colore del testo che stiamo usando qui è "nero". Ora posizioniamo la proprietà di posizione assoluta. Il nostro margine superiore è "50%" e anche lo stesso per il margine "a sinistra". Imposta l'oggetto "50%" dalla parte superiore e anche da sinistra. Useremo l'ultima proprietà, e questa è la proprietà "trasforma". Trasforma l'oggetto all'indietro, metà della sua larghezza e anche dell'altezza. Agirà rispetto al corpo dell'oggetto. Invertirà l'oggetto "50%" invertire la metà della sua larghezza e la metà inversa "50%" della sua altezza.
Produzione
Conclusione
In questo tutorial, abbiamo coperto il concetto del centro di posizione assoluto in CSS. Abbiamo spiegato come centrare l'oggetto in verticale e orizzontale in esempi separati, e quindi abbiamo fornito altri due esempi in cui abbiamo centrato l'oggetto sia in verticale che orizzontalmente allo stesso tempo. Abbiamo discusso di quattro esempi qui in questo tutorial. Abbiamo eseguito tutti gli esempi e abbiamo incollato anche gli screenshot di output. Imparerai facilmente questo centro di posizione assoluto in CSS dopo lo studio approfondito di questo tutorial, e spero che sia molto utile per te quando lo provi da solo.