Come mettere l'immagine in linea con il testo

Durante la pubblicazione di articoli di ricerca, le immagini in linea con i dati di testo vengono utilizzate per una migliore comprensione dell'utente. Le immagini in linea sono utilizzate per trasmettere valore e informazioni. Supporta anche una vasta gamma di formati di dati, tra cui "GIF", "JPG", "PNG" e "SVG". Inoltre, gli utenti possono anche utilizzare questo formato per creare la pagina web. Per fare ciò, HTML/CSS fornisce proprietà diverse per aggiungere l'immagine in linea con il testo.

Questo articolo spiegherà:

• • Metodo 1: come inserire un'immagine in linea con il testo in HTML?
  • Metodo 2: come inserire un'immagine in linea con il testo usando le proprietà CSS?

Metodo 1: come inserire un'immagine in linea con il testo in HTML?

Per mettere un'immagine in linea con il testo in HTML, utilizzare lo stile in linea in HTML. Per fare ciò, segui le istruzioni fornite.

Passaggio 1: aggiungi un'immagine

Inizialmente, aggiungi un'immagine con l'aiuto di ""Tag. Quindi, applica lo stile in linea utilizzando il “stile"Attributo. La descrizione dell'attributo è menzionata di seguito:

• • L'HTML “stile"Il tag contiene diverse proprietà CSS e coppie di valori che possono essere utilizzate direttamente. Per fare ciò, il valore di questo attributo è impostato come "allineamento verticale: medio".
  • IL "allineamento verticale"La proprietà viene applicata per controllare l'allineamento verticale dell'elemento.
  • "src"Viene utilizzato per l'inserimento di un file multimediale all'interno dell'elemento.

Passaggio 2: crea un contenitore "div"

Successivamente, usa il “"Elemento per creare un contenitore div nella pagina HTML. Quindi, inserire il “stile"Attributo con i seguenti valori:

• • "allineamento verticale: medio"È impostato per lo stile in linea e l'impostazione dell'allineamento del contenitore.
  • "Visualizza: in linea"Dice all'elemento di adattarsi alla stessa linea.
  • Successivamente, incorporare il testo tra il "div"Tag:

La natura ci fornisce pace.

Si può notare che l'immagine è stata aggiunta in linea con il testo sulla pagina HTML:

Metodo 2: come inserire un'immagine in linea con il testo usando le proprietà CSS?

Per mettere un'immagine in linea con il testo, il CSS "allineamento verticale"Proprietà con il valore"mezzo" E "Schermo" COME "in linea" può essere applicato.

Passaggio 1: creare contenitore di div principale

Innanzitutto, crea un contenitore div usando il ""Tag e aggiungi un attributo ID con un nome specifico.

Passaggio 2: creare un contenitore di div nidificato

Successivamente, crea un prossimo contenitore tra il primo "div"Container e inserire un"classe"Attributo con un nome particolare. Quindi, incorporare il testo tra il tag "div".

Passaggio 3: aggiungi un'immagine

Successivamente, aggiungi un'immagine utilizzando il “"Tag. Quindi, aggiungi gli attributi sotto l'elenco nel tag immagine:

• • "src"Viene utilizzato per aggiungere il file multimediale. Per fare ciò, abbiamo impostato il nome del file come valore di questo attributo.
  • "larghezza" E "altezza"Determina la dimensione dell'elemento immagine aggiunto:

La natura è un dono prezioso per tutta l'umanità e altri organismi.

Ci fornisce aria fresca, ossigeno e bellezza.

Produzione

Passaggio 4: contenitore "div" stile

Accedi all'elemento Div con l'aiuto del valore dell'ID come "#principale":

#principale
Margine: 30px 80px;
Background-color: RGB (217, 252, 203);
bordo: 3px verde solido;
imbottitura: 30px;

Quindi, applica le proprietà CSS menzionate nello snippet di codice sopra:

• • "margine"Definisce uno spazio al di fuori del confine definito.
  • "colore di sfondo"La proprietà ha assegnato il colore sul retro dell'elemento definito.
  • "confine"Determina un limite attorno all'elemento.
  • "imbottitura"Viene utilizzato per aggiungere lo spazio all'interno del bordo definito.

Passaggio 5: rendere l'immagine in linea con il testo

Accedi al contenitore Div nidificato con il nome di classe ".contenuto principale"E applica le proprietà CSS elencate:

.contenuto principale
Altezza: 100px;
larghezza: 200px;
allineamento verticale: medio;
Visualizza: in linea;

Qui:

• • "altezza" E "larghezza"Le proprietà sono utilizzate per l'impostazione della dimensione dell'elemento.
  • "allineamento verticale"Viene utilizzato per impostare l'allineamento verticale come"mezzo".
  • "Schermo"Controlla il modo in cui un elemento viene gestito come un componente a blocco o in linea, nonché la disposizione dei suoi figli.

Produzione

Si tratta solo di mettere un'immagine in linea con il testo.

Conclusione

Per mettere l'immagine in linea con il testo, prima, aggiungi un'immagine e un testo nel contenitore Div. Quindi, l'utente può utilizzare lo stile in linea in HTML e applicare le proprietà CSS. Per farlo, applica il "allineamento verticale"Proprietà CSS con il valore"mezzo" E "Schermo" impostato come "in linea"Per mettere l'immagine in linea con il testo. Questo post ha spiegato il metodo per inserire l'immagine in linea con il testo.