Kaip tinkamai suderinti vaizdus ir tekstą

Kaip Tinkamai Suderinti Vaizdus Ir Teksta



Interaktyvi svetainė gali pritaikyti ekrano dydį ir įrenginio, kuriuo ji peržiūrima, matmenis. Be svetainės reagavimo, taip pat būtina, kad vaizdai ir tekstas būtų suderinti ir reaguoja. Sulygiuoti vaizdai yra tie, kurie apvynioja tekstą aplink juos. Lygiuotas tekstas yra tas, kuris atrodo kaip visa pastraipa.

Šiame straipsnyje bus nagrinėjamas vaizdų ir teksto suderinimo būdas.





Kaip tinkamai suderinti vaizdus ir tekstą?

Turinys, įskaitant vaizdus ir tekstą, gali būti suderintas naudojant Bootstrap. Norėdami pateikti demonstraciją, pateikėme du pavyzdžius:



1 pavyzdys: Sulygiuokite tekstą vertikaliai centre, o vaizdą – horizontaliai



Pirmiausia pabandykite centruoti vaizdą horizontaliai, o tekstą vertikaliai. Tuo tikslu vadovaukitės toliau pateiktomis instrukcijomis:



1 veiksmas: sukurkite HTML struktūrą

Kurdami HTML struktūrą, pirmiausia susiekite „ Bootstrap “ ir išorinį CSS failą. Po to sukurkite a

konteinerį ir įtraukite vaizdą naudodami žyma ir tekstas:



< kūnas >
< div klasė = 'konteineris' >
< img src = 'bandomas vaizdas.jpg' viskas = 'bandomasis vaizdas' >
< div klasė = 'tekstas' > Tai tam tikras tekstas. div >
div >
kūnas >

2 veiksmas: taikykite CSS

Ant konteinerio:

  • Dabar sucentruokite turinį, pritaikydami CSS prie „ Konteineris ' klasė.
  • Nustatyti ' lankstus 'turto vertė' ekranas “, kad sukurtumėte lanksčią dėžę.
  • Nustatyti „sulyginti elementus ' nuosavybė ' centras “ reikšmę, kad vertikaliai centruotų išlygiavimą.
  • Nustatyti ' pateisinti-turinys “ ypatybės vertę į „centrą“, kad horizontaliai centruotų lygiavimą.
  • Galiausiai nurodykite reikšmę ' centras 'į turtą' teksto lygiavimas “, kad centre būtų tekstas.

Įjungta :

  • Nurodykite ' maksimalus plotis 'turtas į vertę' centras “, kad būtų užtikrintas vaizdo mastelis kartu su konteineriu.
  • Nurodykite reikšmę ' automatinis “ į „ aukščio “, kad būtų išlaikytas vaizdo kraštinių santykis.

Ant teksto:

  • Nustatykite teksto šrifto dydį į ' 16 pikselių “, nurodydami reikšmę „16 pikselių“ į „ šrifto dydis “.
  • Nustatykite teksto plotį priskirdami „ maksimalus plotis „turtas, kurio vertė“ 390 taškų “:
.konteineris {
ekranas: lankstus ;
teksto lygiavimas: centre;
pateisinti-turinys: centras;
lygiuoti elementus: centre;
}

img {
maksimalus plotis: 100 % ;
aukštis: automatinis;
}

.tekstas {
šrifto dydis: 16 pikselių;
maksimalus plotis: 390 pikselių;
}

Galima pastebėti, kad tekstas yra vertikaliai centre, o vaizdas – horizontaliai:

2 pavyzdys: Sulygiuokite tekstą ir atsakingą vaizdą kairėje

Šiame pavyzdyje vaizdas ir tekstas bus sulygiuoti kairėje. Tuo tikslu vadovaukitės toliau pateiktomis nuosekliomis instrukcijomis:

1 veiksmas: sukurkite HTML struktūrą

HTML kodas yra toks pat kaip aukščiau, naudojamas pavyzdyje.

2 veiksmas: taikykite CSS

Ant konteinerio:

  • Nustatyti ' lankstumo kryptis ' nuosavybės vertė į ' stulpelyje “ norėdami sukrauti elementus vertikaliai ant mažų ekranų.
  • Nustatyti ' išlyginti elementus ' nuosavybės vertė į ' lankstus startas “ į kairę, kad sulygiuotumėte elementus.
  • Galiausiai nustatykite ypatybę ' teksto lygiavimas “ į „ paliko “, kad sulygiuotumėte tekstą kairėje.

Įjungta :

  • Tas pats, kas naudojamas aukščiau pateiktame pavyzdyje.

Ant teksto:

  • Tas pats, kas naudojamas aukščiau pateiktame pavyzdyje:
.konteineris {
ekranas: lankstus ;
lankstumo kryptis: stulpelis;
align-items: flex-start;
teksto lygiavimas: kairėje;
}

img {
maksimalus plotis: 100 % ;
aukštis: automatinis;
}

.tekstas {
šrifto dydis: 16 pikselių;
maksimalus plotis: 390 pikselių;
}

Išvestis patvirtina, kad tekstas ir vaizdas yra sulygiuoti kairėje:

Išvada

Norėdami tinkamai suderinti vaizdus ir tekstą, pirmiausia sukurkite tinklelį arba lankstų išdėstymą CSS, tada nustatykite „ lygiuoti-elementą ' turto vertė į ' centras “. Tai padarius, vaizdai ir tekstas bus tinkamai suderinti CSS. Šis įrašas suteikė vartotojams išsamų vadovą, kaip tinkamai suderinti vaizdus ir tekstą.

Kita

Kategorija

Populiarios Temos

Kaip atlikti URL dekodavimą Java

Trūksta perkėlimo mygtuko „Windows Vista“ skirtuke „Viešieji aplankai“ - „Winhelponline“

Kaip Process Argv veikia Node.js?

Kaip pridėti valandų iki datos objektą „JavaScript“.

Kaip įjungti ir naudoti pasiekiamumą „iPhone“.

Kaip atblokuoti iš interneto atsisiųstus failus? - Winhelponline

Kaip įdiegti GUI Ubuntu 24.04 serveryje

Kaip naudoti sąrašo analizatorių „LangChain“?

Ištaisyti Explorer.exe klaidą „Šis failas neturi susietos programos“ sistemoje „Windows 7“ arba „8“ - „Winhelponline“

Nuo šviesos priklausomas rezistorius – LDR jutiklis su ESP32 naudojant Arduino IDE

Patikrinkite, ar elementas yra masyve

Kaip išmesti stulpelį iš SQLite lentelės

PySpark SelectExpr()

Kaip įdiegti „ChatGPT“ vietoje?

Kaip užauginti papūgą „Minecraft“.

Kur yra netrukdymo režimas „iPhone“.

C# Sąlyginis loginis ARBA operatorius

Kaip gauti ir nustatyti įvesties teksto reikšmę „JavaScript“.

Kaip išjungti „Google Chrome“ profilius

Ar Raspberry Pi tinka mokytis Python?