Een responsieve website kan de schermgrootte en de afmetingen van het apparaat waarop deze wordt bekeken aanpassen. Naast het reactievermogen van de website is het ook noodzakelijk dat de afbeeldingen en tekst uitgelijnd en responsief zijn. Uitgelijnde afbeeldingen zijn afbeeldingen die tekst eromheen wikkelen. Terwijl uitgelijnde tekst degene is die eruitziet als een hele alinea.
In dit artikel wordt gekeken naar de methode om afbeeldingen en tekst responsief uit te lijnen.
Hoe afbeeldingen en tekst responsief uitlijnen?
De inhoud, inclusief afbeeldingen en tekst, kan responsief worden uitgelijnd met behulp van Bootstrap. Om de demonstratie te geven, hebben we twee voorbeelden opgesomd:
- Centreer de tekst verticaal en de afbeelding horizontaal.
- Lijn de tekst en de responsieve afbeelding links uit.
Voorbeeld 1: Centreer de tekst verticaal en de afbeelding horizontaal
Probeer eerst de afbeelding horizontaal en de tekst verticaal te centreren. Volg daartoe de onderstaande instructies:
Stap 1: Maak een HTML-structuur
Terwijl u een HTML-structuur maakt, koppelt u eerst de “ Bootstrap ” en ook het externe CSS-bestand. Maak daarna een Stap 2: CSS toepassen Op container: Op Op tekst: Er kan worden opgemerkt dat de tekst verticaal gecentreerd is en de afbeelding horizontaal gecentreerd: Voorbeeld 2: Lijn de tekst en de responsieve afbeelding links uit In dit gegeven voorbeeld worden de afbeelding en de tekst links uitgelijnd. Volg daartoe de onderstaande stapsgewijze instructies: Stap 1: Maak een HTML-structuur HTML-code is dezelfde als hierboven, gebruikt in het voorbeeld. Stap 2: CSS toepassen Op container: Op Op tekst: De uitvoer bevestigt dat de tekst en afbeelding links zijn uitgelijnd: Om afbeeldingen en tekst responsief uit te lijnen, maakt u eerst een raster- of flexlay-out in CSS en stelt u vervolgens de “ uitlijnen-item “eigendomswaarde naar de” centrum ”. Als u dit doet, worden afbeeldingen en tekst responsief uitgelijnd in CSS. Dit artikel heeft de gebruikers een complete handleiding gegeven voor het responsief uitlijnen van afbeeldingen en tekst. label en tekst:
< lichaam >
< div klas = 'container' >
< img src= 'test-afbeelding.jpg' alles = 'testafbeelding' >
< div-klasse = 'tekst' > Dit is wat tekst. div >
div >
lichaam >
:
.container {
weergave: buigen ;
tekst uitlijnen: centreren;
rechtvaardigen-inhoud: centrum;
items uitlijnen: centreren;
}
afb {
Maximale wijdte: 100 % ;
hoogte: automatisch;
}
.tekst {
lettergrootte: 16px;
maximale breedte: 390px;
}
:
.container {
weergave: buigen ;
flex-richting: kolom;
align-items: flex-start;
tekst uitlijnen: links;
}
afb {
Maximale wijdte: 100 % ;
hoogte: automatisch;
}
.tekst {
lettergrootte: 16px;
maximale breedte: 390px;
}
Conclusie