Responsiivne veebisait saab kohandada ekraani suurust ja seadme mõõtmeid, milles seda vaadatakse. Lisaks veebisaidi reageerimisvõimele on vajalik, et pildid ja tekst oleksid joondatud ja reageerivad. Joondatud pildid on need, mis mähivad teksti nende ümber. Joondatud tekst on see, mis näeb välja nagu terve lõik.
Selles artiklis käsitletakse piltide ja teksti reageeriva joondamise meetodit.
Kuidas pilte ja teksti reageerivalt joondada?
Sisu, sealhulgas pilte ja teksti, saab Bootstrapi abil reageerivalt joondada. Demonstreerimiseks oleme loonud kaks näidet:
- Joondage tekst vertikaalselt keskele ja pilt horisontaalselt.
- Joondage tekst ja reageeriv pilt vasakule.
Näide 1: Joondage tekst vertikaalselt keskele ja kujutis horisontaalselt
Esmalt proovige pilti tsentreerida horisontaalselt ja teksti vertikaalselt. Sel eesmärgil järgige allolevaid juhiseid.
1. samm: looge HTML-struktuur
HTML-i struktuuri loomisel linkige esmalt Bootstrap ” ja ka välist CSS-faili. Pärast seda looge a 2. samm: rakendage CSS-i Konteineril: Peal Teksti peal: Võib täheldada, et tekst on vertikaalselt tsentreeritud ja pilt horisontaalselt tsentreeritud: Näide 2: Joondage tekst ja reageeriv pilt vasakule Antud näites on pilt ja tekst vasakule joondatud. Selleks järgige allolevaid samm-sammult juhiseid. 1. samm: looge HTML-struktuur HTML-kood on sama, mis ülal, näites kasutatud. 2. samm: rakendage CSS-i Konteineril: Peal Teksti peal: Väljund kinnitab, et tekst ja pilt on vasakule joondatud: Piltide ja teksti reageerivaks joondamiseks looge esmalt CSS-is ruudustik või painduv paigutus, seejärel määrake ' joondada-üksus ' vara väärtus väärtusele ' Keskus ”. Seda tehes joondatakse pildid ja tekst CSS-is reageerivalt. See kirjutis on andnud kasutajatele täieliku juhendi piltide ja teksti reageerivaks joondamiseks. silt ja tekst:
< keha >
< div klass = 'konteiner' >
< img src = 'test-image.jpg' kõike = 'testi pilt' >
< div klass = 'tekst' > See on mingi tekst. div >
div >
keha >
:
.konteiner {
kuva: painduv ;
teksti joondamine: keskel;
õigustama-sisu: keskpunkt;
joonda-elemendid: keskel;
}
img {
maksimaalne laius: 100 % ;
kõrgus: auto;
}
.tekst {
fondi suurus: 16 pikslit;
maksimaalne laius: 390 pikslit;
}
:
.konteiner {
kuva: painduv ;
paindesuund: veerg;
joondus-elemendid: flex-start;
teksti joondamine: vasakule;
}
img {
maksimaalne laius: 100 % ;
kõrgus: auto;
}
.tekst {
fondi suurus: 16 pikslit;
maksimaalne laius: 390 pikslit;
}
Järeldus