Lærðu hvernig á að miðja mynd í DIV með HTML og CSS

forritun með div

viltu vita hvernig miðja mynd í DIV? Að miðja mynd í DIV getur verið gagnlegt til að bæta útlit og skipulag vefsíðunnar þinnar og til að auðkenna myndina sem þú vilt sýna. Miðja mynd í DIV er ekki erfitt, en það fer eftir nokkrum þáttum eins og myndgerð, DIV stærð, DIV stíl osfrv.

Í þessari grein munum við útskýra hvernig á að miðja mynd í DIV með HTML og CSS, sem eru forritunarmálin sem notuð eru til að búa til og hanna vefsíður. Við ætlum að sýna þér nokkrar aðferðir og dæmi svo þú getir valið þá sem hentar þér best.

Hvað er DIV

tölvukóðun

div er HTML frumefni sem er vanur að búa til hluta eða ílát á vefsíðu. Þetta getur innihaldið aðra þætti, svo sem texta, myndir, tengla osfrv. Að auki er þetta blokkþáttur, sem þýðir að hann tekur alla breidd síðunnar og það þú getur skilgreint hæð og breidd. div er almennt frumefni, sem þýðir að það hefur enga sérstaka merkingarlega merkingu. Af þessum sökum er það venjulega notað með class eða id eiginleikanum, til að gefa divinu nafn eða flokk. Það er líka oft notað með stíleiginleika eða með CSS stílblöðum, til að gefa útlit eða skipulag á div.

div er notað til að skipuleggja og skipuleggja innihald vefsíðunnar og til að beita stíleiginleikum á hana. Með div geturðu búið til kassa sem inniheldur aðra þætti og sem hægt er að stilla, miðja, lita, skyggða osfrv. Einnig er hægt að nota sniðið til að búa til dálka eða raðir, að dreifa efni á skipulegan og sveigjanlegan hátt. Almennt er einnig hægt að nota það til að búa til sjónræn eða gagnvirk áhrif, svo sem hreyfimyndir, umbreytingar, umbreytingar osfrv.

Hvernig á að miðja mynd lárétt

Maður sem notar python

Miðja mynd lárétt í DIV þýðir að stilla myndina í miðju af breidd DIV. Það eru nokkrar leiðir til að gera það, en þær algengustu eru eftirfarandi:

  • Notaðu text-align: center eiginleikann. Þessi eiginleiki er notaður á DIV-eininguna og veldur því að allir þættir innan DIV-innréttast lárétt í miðju. Til dæmis:

  • Notaðu spássíuna: auto property. Þessi eiginleiki er settur á IMG þáttinn og veldur því að myndin hefur sömu spássíur til vinstri og hægri, sem miðar hana lárétt. Til þess að það virki þarf myndin að vera með skilgreinda breidd og vera af gerðinni blokk eða hafa eiginleikann sýna: blokk. Til dæmis:

  • Notaðu umbreytingareiginleikann: translateX(). Þessi eiginleiki er notaður á IMG þáttinn og veldur því að myndin færist lárétt í ákveðna fjarlægð frá upprunalegri stöðu sinni. Til að miðja það lárétt þarftu að færa það 50% af breiddinni til hægri. Til þess að það virki þarf myndin að vera með skilgreinda breidd og vera af gerðinni blokk eða hafa eiginleikann sýna: blokk. Til dæmis:

Hvernig á að miðja mynd lóðrétt

Tölvukóðun

Miðja mynd lóðrétt í DIV þýðir að stilla myndina í miðju hæðar DIV. Það eru nokkrar leiðir til að gera það, en þær algengustu eru eftirfarandi:

  • Notaðu lóðrétt-align: middle eignina. Þessi eiginleiki er notaður á IMG þáttinn og veldur því að myndin er miðja lóðrétt miðað við grunnlínu textans. Til að þetta virki verður DIV þátturinn að hafa skilgreinda hæð og IMG þátturinn verður að vera af gerðinni inline eða hafa skjáinn: inline eiginleikann. Til dæmis:

  • Notaðu eiginleikana spássíu-efri og spássíu-neðst. Þessir eiginleikar eru notaðir á IMG þáttinn og valda því að myndin hefur sömu spássíur efst og neðst, sem miðar hana lóðrétt. Til að þetta virki verður DIV þátturinn að hafa skilgreinda hæð og IMG þátturinn verður að hafa skilgreinda hæð og vera af gerðinni blokk eða hafa skjáinn: blokk eiginleika. Til dæmis:

  • Notaðu umbreytingareiginleikann: translateY(). Að þessu sinni er það beitt á IMG þáttinn og veldur því að myndin færist lóðrétt í ákveðna fjarlægð frá upprunalegri stöðu sinni. Til að miðja það lóðrétt þarftu að færa það 50% af hæðinni niður. Til þess að þetta virki verður DIV einingin að hafa skilgreinda hæð og IMG einingin verður að hafa skilgreinda hæð og vera af gerðinni blokk eða hafa eiginleikann sýna: blokk. Til dæmis:

Hvernig á að miðja mynd á báða ása

Forritun á tveimur skjám

Miðja mynd á báðum ásum í DIV þýðir stilltu myndina í miðju bæði á breidd og hæð DIV er þetta flóknasta. Það eru nokkrar leiðir til að gera það, en þær algengustu eru eftirfarandi:

  • Notaðu text-align: center eiginleikann og vertical-align: middle eignina. Þessir eiginleikar eiga við um DIV þáttinn og IMG þáttinn í sömu röð og valda því að myndin er miðjast bæði lárétt og lóðrétt. Til að þetta virki verður DIV þátturinn að hafa skilgreinda hæð og IMG þátturinn verður að vera af gerðinni inline eða hafa skjáinn: inline eiginleikann. Til dæmis:

  • Notaðu spássíuna: auto property. Hér er það notað á IMG þáttinn og gerir myndina með sömu spássíur á öllum fjórum hliðum, sem miðstöðvar hana á báðum ásum. Til að þetta virki verður DIV þátturinn að hafa skilgreinda hæð og IMG þátturinn verður að hafa skilgreinda breidd og hæð og vera af gerðinni blokk eða hafa skjáinn: blokk eiginleika. Til dæmis:

  • Notaðu transform: translate() eignina. Í þessu tilviki er það beitt á IMG þáttinn og veldur því að myndin færist í ákveðna fjarlægð frá upprunalegri stöðu sinni á báðum ásum. Til að miðja það þarftu að færa það 50% af breiddinni til hægri og 50% af hæðinni niður. Til að þetta virki verður DIV þátturinn að hafa skilgreinda hæð og IMG þátturinn verður að hafa skilgreinda breidd og hæð og vera af gerðinni blokk eða hafa skjáinn: blokk eiginleika. Til dæmis:

Miðja hvaða mynd sem er

Verkefnastika og gagnagrunnur

Það getur verið gagnlegt að miðja mynd í DIV til að bæta útlit og skipulag vefsíðunnar þinnar, og til að auðkenna myndina sem þú vilt sýna. Það er ekki erfitt að miðja mynd í DIV, en það fer eftir nokkrum þáttum eins og gerð myndarinnar, stærð DIV, stíl DIV o.s.frv.

Í þessari grein Við höfum útskýrt hvernig á að miðja mynd í DIV með HTML og CSS, sem eru forritunarmálin sem notuð eru til að búa til og hanna vefsíður. Við höfum sýnt þér nokkrar aðferðir og dæmi svo þú getir valið sú sem hentar þér best.

Við vonum að þér líkaði við þessa grein og að þú hafir lært hvernig á að miðja mynd í DIV. Ef þú hefur einhverjar spurningar eða ábendingar, skildu eftir athugasemd. Þú getur líka deilt þessari grein með vinum þínum eða fjölskyldu sem líkar við HTML eða CSS. Höldum í vinnuna og forritið!


Vertu fyrstur til að tjá

Skildu eftir athugasemd þína

Netfangið þitt verður ekki birt. Nauðsynlegir reitir eru merktir með *

*

*

  1. Ábyrgðarmaður gagna: Miguel Ángel Gatón
  2. Tilgangur gagnanna: Control SPAM, umsögn stjórnun.
  3. Lögmæti: Samþykki þitt
  4. Samskipti gagna: Gögnunum verður ekki miðlað til þriðja aðila nema með lagalegri skyldu.
  5. Gagnageymsla: Gagnagrunnur sem Occentus Networks (ESB) hýsir
  6. Réttindi: Hvenær sem er getur þú takmarkað, endurheimt og eytt upplýsingum þínum.