Un sito web responsivo può adattare le dimensioni dello schermo e del dispositivo su cui viene visualizzato. Oltre alla reattività del sito web, è necessario anche che le immagini e il testo siano allineati e reattivi. Le immagini allineate sono quelle che avvolgono il testo attorno a loro. Mentre il testo allineato è quello che assomiglia a un intero paragrafo.
Questo articolo esaminerà il metodo per allineare immagini e testo in modo reattivo.
Come allineare immagini e testo in modo reattivo?
Il contenuto, comprese immagini e testo, può essere allineato in modo reattivo utilizzando Bootstrap. Per fornire la dimostrazione, abbiamo elencato due esempi:
- Al centro allinea il testo verticalmente e l'immagine orizzontalmente.
- Allinea a sinistra il testo e l'immagine reattiva.
Esempio 1: Allinea al centro il testo verticalmente e l'immagine orizzontalmente
Innanzitutto, prova a centrare l'immagine orizzontalmente e il testo verticalmente. A tal fine, seguire le istruzioni fornite di seguito:
Passaggio 1: crea una struttura HTML
Durante la creazione di una struttura HTML, per prima cosa collega il ' Bootstrap ' e anche il file CSS esterno. Successivamente, crea un file Passaggio 2: applica i CSS Sul contenitore: SU Sul testo: Si può osservare che il testo è centrato verticalmente e l'immagine è centrata orizzontalmente: Esempio 2: allineare a sinistra il testo e l'immagine reattiva In questo esempio, l'immagine e il testo saranno allineati a sinistra. A tale scopo, seguire le istruzioni dettagliate riportate di seguito: Passaggio 1: crea una struttura HTML Il codice HTML è lo stesso di sopra, utilizzato nell'esempio. Passaggio 2: applica i CSS Sul contenitore: SU Sul testo: L'output conferma che il testo e l'immagine sono allineati a sinistra: Per allineare immagini e testo in modo reattivo, crea innanzitutto una griglia o un layout flessibile in CSS, quindi imposta l'opzione ' allinea-elemento 'valore della proprietà al' centro ”. In questo modo le immagini e il testo verranno allineati in modo reattivo nei CSS. Questo articolo ha fornito agli utenti una guida completa per allineare immagini e testo in modo reattivo.
< corpo >
< div classe = 'contenitore' >
< img src = 'immagine-prova.jpg' qualunque cosa = 'Immagine di prova' >
< classe div = 'testo' > Questo è un testo. div >
div >
corpo >
.contenitore {
Schermo: flettere ;
allineamento testo: centro;
giustifica-contenuto: centro;
allineare gli elementi: centro;
}
imm {
larghezza massima: 100 % ;
altezza: automatica;
}
.testo {
dimensione carattere: 16px;
larghezza massima: 390px;
}
.contenitore {
Schermo: flettere ;
direzione flessibile: colonna;
elementi di allineamento: flex-start;
allineamento testo: sinistra;
}
imm {
larghezza massima: 100 % ;
altezza: automatica;
}
.testo {
dimensione carattere: 16px;
larghezza massima: 390px;
}
Conclusione