Responsiivinen verkkosivusto voi mukauttaa näytön kokoa ja laitteen kokoa, jolla sitä tarkastellaan. Sivuston responsiivisuuden lisäksi on myös välttämätöntä, että kuvat ja teksti ovat kohdakkain ja responsiivisia. Tasatut kuvat kiertävät tekstin ympärilleen. Tasattu teksti on se, joka näyttää kokonaiselta kappaleelta.
Tässä artikkelissa tarkastellaan tapaa kohdistaa kuvat ja teksti reagoivasti.
Kuinka kohdistaa kuvat ja teksti reagoivasti?
Sisältö, mukaan lukien kuvat ja teksti, voidaan kohdistaa reagoivasti Bootstrapin avulla. Esittelyä varten olemme listanneet kaksi esimerkkiä:
Esimerkki 1: Keskitä teksti pystysuunnassa ja kuva vaakasuunnassa
Yritä ensin keskittää kuva vaakasuunnassa ja teksti pystysuunnassa. Noudata tätä varten alla olevia ohjeita:
Vaihe 1: Luo HTML-rakenne
Kun luot HTML-rakennetta, linkitä ensin ' Bootstrap ” ja myös ulkoinen CSS-tiedosto. Luo sen jälkeen a Vaihe 2: Ota CSS käyttöön Säiliössä: Päällä Tekstissä: Voidaan havaita, että teksti on keskitetty pystysuoraan ja kuva vaakasuoraan: Esimerkki 2: Tasaa teksti ja reagoiva kuva vasemmalle Tässä esimerkissä kuva ja teksti tasataan vasemmalle. Käy tätä varten läpi alla olevat vaiheittaiset ohjeet: Vaihe 1: Luo HTML-rakenne HTML-koodi on sama kuin yllä, käytetty esimerkissä. Vaihe 2: Ota CSS käyttöön Säiliössä: Päällä Tekstissä: Tulos vahvistaa, että teksti ja kuva on tasattu vasemmalle: Kun haluat kohdistaa kuvat ja tekstin reagoivasti, luo ensin ruudukko tai joustava asettelu CSS:ssä ja aseta sitten ' kohdista-kohde ' kiinteistön arvo ' keskusta ”. Tämä kohdistaa kuvat ja tekstin reagoivasti CSS:ssä. Tämä kirjoitus on antanut käyttäjille täydellisen oppaan kuvien ja tekstin kohdistamiseen reagoivasti. tunniste ja teksti:
< kehon >
< div luokkaa = 'kontti' >
< img src = 'testikuva.jpg' kaikki = 'testikuva' >
< div luokka = 'teksti' > Tämä on vähän tekstiä. div >
div >
kehon >
:
.container {
näyttö: flex ;
tekstin tasaus: keskellä;
perustella-sisältö: keskus;
kohdista kohteet: keskellä;
}
img {
suurin leveys: 100 % ;
korkeus: auto;
}
.teksti {
fonttikoko: 16px;
suurin leveys: 390 pikseliä;
}
:
.container {
näyttö: flex ;
flex-suunta: pylväs;
tasauskohteet: flex-start;
tekstin tasaus: vasen;
}
img {
suurin leveys: 100 % ;
korkeus: auto;
}
.teksti {
fonttikoko: 16px;
suurin leveys: 390 pikseliä;
}
Johtopäätös