Come scrivere una didascalia sotto un'immagine? - CSS

In HTML/CSS, gli utenti possono aggiungere immagini e loghi diversi durante la creazione di pagine Web. Inoltre, consente agli utenti di aggiungere una didascalia dell'immagine e accedere a vari moduli. Ad esempio, gli utenti possono aggiungere la didascalia sotto l'immagine, in alto, la sua sinistra o destra. A tale scopo, il ""L'elemento viene utilizzato.

Questo post spiega sulla scrittura di una didascalia sotto un'immagine.

Come scrivere una didascalia sotto un'immagine?

Per scrivere una didascalia sotto un'immagine, forniremo diversi metodi menzionati di seguito:

• Metodo 1: come aggiungere la didascalia dell'immagine usando html ""Elemento?
• Metodo 2: come aggiungere la didascalia dell'immagine usando ""Elemento?

Metodo 1: come aggiungere la didascalia dell'immagine usando l'elemento HTML ""?

Per aggiungere una didascalia dell'immagine, esaminare le seguenti istruzioni:

• Innanzitutto, aggiungi il “"Elemento, che viene utilizzato per rappresentare il contenuto autonomo, potenzialmente con una didascalia opzionale.
• Successivamente, inserire un “"Tag all'interno del paragrafo"

  "Tag. Aggiungi l'immagine utilizzando il "src"Attributo. IL "Al"La proprietà mostra il contenuto aggiunto se l'immagine non è stata visualizzata per qualche motivo.

• Imposta la larghezza dell'immagine come "200px".
• Poi il ""Il tag viene utilizzato per aggiungere la didascalia per l'immagine. Inoltre, aggiungi la didascalia tra i tag "":

>

Puoi vedere che l'immagine con la didascalia specificata è stata visualizzata:

Ora, spostati verso il secondo metodo per aggiungere la didascalia usando CSS.

Metodo 2: come aggiungere la didascalia dell'immagine usando l'elemento ""?

Per aggiungere la didascalia dell'immagine usando ""Elemento, prova le istruzioni fornite:

• Creare un ""Container e aggiungi un attributo di classe con il nome"detentore di immagini".
• Aggiungi tag di intestazione "

  "Per inserire l'intestazione e lo stile l'intestazione secondo la tua scelta.

• Aggiungi un altro elemento "" e inserisci un "Tag insieme a "src","Al" E "larghezza"Attributi tra il contenitore Div.
• Aggiungi un terzo "" con il nome della classe "img-capition". Quindi, fornire la didascalia tra i tag "". Inoltre, il "
  "L'elemento viene utilizzato per aggiungere una pausa di riga:

Immagine HTML

Creatori di contenuti TSL

Si può osservare che la didascalia per l'immagine è stata aggiunta correttamente:

Ora, ci muoviamo verso la sezione CSS per applicare le proprietà.

Stile ".Tolder di immagini "in CSS

Innanzitutto, accedi al ""Elemento con una classe".detentore di immagini". Quindi, applica le seguenti proprietà CSS:

.Image-Holder
Posizione: relativo;
Altezza: 100px;
larghezza: 200px;
Margine: auto;

I dettagli delle proprietà di menzione sopra sono descritti di seguito:

• IL "posizione"È impostato come"parente"Per specificare la posizione originale di un elemento che rimane nel flusso del documento, proprio come il valore statico.
• Poi, "altezza"Viene utilizzato per definire l'altezza dell'elemento.
• IL "larghezza"La proprietà specifica la dimensione dell'elemento in larghezza.
• IL "margine"È impostato come"auto"Per impostare lo spazio automaticamente attorno all'elemento.

Didascalia di stile in CSS

In questo passaggio, accederemo alle due classi con il nome "detentore di immagini" E "img-capition"E applica le seguenti proprietà CSS:

.detentore di immagini .img-capition
Posizione: assoluto;
Testo-align: centro;
Font-weight: audace;
larghezza: 200px;
Altezza: 50px;
A sinistra: 0px;
Colore: #F80909;
Background: RGB (140, 166, 253);

La descrizione delle proprietà sopra menzionate sono le seguenti:

• IL "allineamentoLa proprietà "è impostata come"centro"Per allineare la posizione di testo al centro.
• Prossimo, "Font-peso"È assegnato come"grassetto"Per impostare il carattere della didascalia dell'immagine.
• Poi il "colore"La proprietà viene utilizzata per impostare il colore dell'elemento accessibile.
• IL "sfondo"La proprietà imposta il colore dello sfondo dell'elemento.
• Altre proprietà, tra cui "posizione","altezza", E "larghezza"Sono anche utilizzati per applicare le rispettive funzionalità.

Produzione

Abbiamo discusso dei metodi per scrivere la didascalia sotto un'immagine.

Conclusione

Per scrivere una didascalia sotto un'immagine, gli utenti possono utilizzare il ""Elemento o un semplice""Container. Per usare il "", prima, aggiungi il ""Elemento per incorporare l'immagine all'interno del""Elemento, quindi, utilizza l'elemento" "e aggiungi una didascalia tra i suoi tag. Nel secondo approccio, gli utenti possono semplicemente usare il ""Elemento e applicare diverse proprietà CSS per abbellire la didascalia. Questo post ha dimostrato i metodi per scrivere la didascalia sotto un'immagine.