CSS Absolute Position Center
Eksempel 1: Absolutt posisjonssenter horisontalt
Vi vil gjøre alle disse eksemplene i Visual Studio Code. Vi må opprette HTML -filen i vår visuelle studiokode og begynne å skrive koden på den. Etter å ha fullført koden som er gitt på bildet, må du lagre denne filen med ".HTML ”Fil Extension, da det er en“ HTML ”-fil.
Nevn dokumenttypen “HTML” som vi vet at det er en HTML -kode. Deretter, åpne “” og “”. Metaen er definert nedenfor, som er "Charset = UTF-8", som gir tilgang til forskjellige tegn. Vi kobler også denne gjeldende filen med CSS -filen der vi gjør noen stylinger og bruker den absolutte posisjonsegenskapen. For å beskrive forening er “Rel” her; Typen er “Text/CSS” og “Href” som vi gir navnet på filen. Vi kobler “Centersyle.CSS ”med denne nåværende filen. Nå, etter å ha stengt “” skal vi bruke “”. Vi har en overskrift i kroppen og en "div" -klasse med navnet "Element". Endelig må vi lukke alle taggene i rekkefølge. Først, lukk "div", "kropp", og deretter "html" -merker.
CSS -kode
Her er CSS -filen. Når du oppretter denne filen, bruker du ".CSS ”Fil Extension, da det er vår CSS -fil. Må huske at du lagret denne filen med samme navn som du har nevnt i HTML -filen din. Nå her skal vi style denne elementklassen ved å bruke forskjellige egenskaper. Plass ".”Og skriv“ element ”som det er navnet på“ Div ”-klassen. Vi justerer “høyden” og “bredde” som henholdsvis "100px" og "200px". Plasser "oransje" som bakgrunnsfarge. Og hvit for skriftfargen. Nå skal vi bruke egenskapen "Absolute Position". Sett "posisjon" som "absolutt". Fra "venstre" er den "0" og fra "høyre" er den satt som "0". Her er topp- og bunnmarginene “0” og venstre; Høyre marginer er “Auto”. Denne venstre og høyre bilmargin brukes, så det tar den automatiske marginen for å gi bredden på objektet.
Utgangen vises i nettleseren. Trykk “Alt+ B ”på HTML -filen for å vise utdataene. Vi limer også ut utgangen fra ovennevnte HTML- og CSS -kode nedenfor.
Produksjon
Eksempel nr. 2: Absolutt posisjonssenter vertikalt
I dette eksemplet bruker vi den samme HTML -filen som vi har laget i forrige eksempel. Bare endre overskriften fra “Absolute Position Center horisontalt” til “Absolute Position Center vertikalt”.
Her setter vi fargen på bakgrunnen til "lilla". Når vi må stille den absolutte posisjonen vertikalt sentrert, setter vi posisjonen til "absolutt" og her nevner "Topp: 0" og "Bottom: 0". Vi satte også margen for denne "bilen" for "topp" og "bunn". Verdien “0” er satt til “Venstre” og “Høyre”. Du kan også sjekke utgangen fra dette eksemplet, som vi har limt inn nedenfor.
Produksjon
I denne utgangen plasseres boksen vertikalt sentrum ved hjelp av den absolutte posisjonsegenskapen. I dette bildet viser mellomrommet mellom teksten og boksen at den er plassert i sentrum i vertikal stilling.
Eksempel nr. 3: Absolute Position Center både horisontalt og vertikalt
I vårt tredje eksempel kommer vi til å sette objektet på den absolutte senterposisjonen. Her er objektet sentrert fra vertikalen og også fra horisontale posisjon. La oss prøve dette tredje eksemplet.
Her, fra starten av, er koden den samme som vi har diskutert i vårt forrige eksempel. Vi endret nettopp koden fra “" -merket litt. Vi lager en klasse av "div" ved å bruke "container" som navnet på klassen. Før vi lukker denne "div" -merket, oppretter vi en annen "Div -klasse", og denne gangen er navnet "Data". Lag en overskrift ved hjelp av “
”Tag og skriv også et avsnitt i“ "-merket. Bruk deretter avsluttende tagger for begge “” -kodene.
CSS -kode
I CSS -koden åpner først parentesene for avsnittet som er skrevet i containerklassen. "Høyden" på denne beholderen er "60px" og "bredden" er også "60px". Vi bruker polstring her som "10px", så det vil generere et "10px" -rom mellom innholdet og grensen. Her er tekstposisjonen "relativ". Vi ønsker å trekke grensen rundt beholderen eller boksen, så vi bruker "grensen" -egenskapen for dette. Vi setter "grensen" bredden som "3px", grensetypen er "solid", og fargen på denne grensen er "grønn". Så når vi viser dette i nettleseren, vil grensen være av grønn farge, solid og også av "3px" bredde. Vi bruker "rosa" som bakgrunnsfarge. Og velg "svart" for skriften. Så skriften eller teksten vises i "svart" farge. Nå, her bruker vi egenskapen “Absolute Position Center”, og den vil stille inn objektet og gå til midten av skjermen.
Produksjon
Eksempel 4
Her limer vi koden til HTML nedenfor for dette eksemplet. Vi bruker koden ovenfor og skaper mindre endringer i den. Vi fjerner nettopp avsnittet.
CSS -kode
"Høyden" på beholderen i dette eksemplet er "70px" og "bredden" er "300px". Bruk "posisjonen" som "absolutt". Nå tegner vi grensen der vi setter sin "bredde" lik "4px", og grensen vil vise "solid", ettersom typen på denne grensen er valgt som "solid". Fargen er "svart". Sett deretter den innvendige bakgrunnsfargen til "hvit". Tekstfargen vi bruker her er "svart". Nå plasserer vi den absolutte posisjonseiendommen. Vår øverste margin er "50%" og også den samme for "venstre" marginen. Den setter objektet “50%” fra toppen og også fra venstre. Vi skal bruke den siste eiendommen, og dette er "transformasjon" -egenskapen. Det forvandler gjenstanden bakover, halvparten av bredden og også av høyden. Det vil handle i forhold til objektets kropp. Det vil reversere objektet “50%” omvendt halvparten av bredden og “50%” omvendt halvparten av høyden.
Produksjon
Konklusjon
I denne opplæringen har vi dekket konseptet med det absolutte posisjonssenteret i CSS. Vi har forklart hvordan vi skal sentrere objektet vertikalt og horisontalt i separate eksempler, og så har vi gitt to andre eksempler der vi har sentrert objektet både vertikalt og horisontalt samtidig. Vi har diskutert fire eksempler her i denne opplæringen. Vi har utført alle eksempler og har limt inn output -skjermbildene også. Du vil enkelt lære dette absolutte posisjonssenteret i CSS etter den grundige studien av denne opplæringen, og jeg håper det vil være veldig nyttig for deg når du prøver det selv.