Hvordan sette bilde på nettet med tekst

Mens du publiserer forskningsartikler, brukes inline -bilder med tekstdataene for en bedre forståelse av brukeren. Inline -bilder brukes til formidling av verdi og informasjon. Den støtter også et bredt spekter av dataformater, inkludert "GIF", "JPG", "PNG" og "SVG". Videre kan brukere også bruke dette formatet for å lage nettsiden. For å gjøre det gir HTML/CSS forskjellige egenskaper for å legge til bildet i nettet med teksten.

Denne oppskrivningen vil forklare:

• • Metode 1: Hvordan sette et bilde på nettet med tekst i HTML?
  • Metode 2: Hvordan sette et bilde på nettet med tekst ved hjelp av CSS -egenskaper?

Metode 1: Hvordan sette et bilde på nettet med tekst i HTML?

For å sette et bilde på nettet med tekst i HTML, bruk inline styling i HTML. For å gjøre det, følg de gitte instruksjonene.

Trinn 1: Legg til et bilde

Til å begynne med, legg til et bilde ved hjelp av "" stikkord. Deretter bruker du inline styling ved å bruke "stil" Egenskap. Beskrivelsen av attributtet er nevnt nedenfor:

• • HTML “stil”Tag inneholder flere CSS -egenskaper og verdipar som kan brukes direkte. For å gjøre det settes verdien av denne attributtet som "Vertikal-align: Midt”.
  • “vertikal-align”Eiendom brukes for å kontrollere elementets vertikale innretting.
  • “src”Brukes til å sette inn en mediefil inne i elementet.

Trinn 2: Lag en "div" -beholder

Deretter, bruk "”Element for å lage en div container på HTML -siden. Sett deretter inn "stil”Attributt med følgende verdier:

• • “Vertikal-align: Midt”Er satt for inline styling og innstilling av beholderjusteringen.
  • “Display: Inline”Forteller elementet om å passe seg selv på samme linje.
  • Etter det, legg inn teksten mellom "div" stikkord:

Naturen gir oss fred.

Det kan legges merke til at bildet er lagt til inline med teksten på HTML -siden:

Metode 2: Hvordan sette et bilde på nettet med tekst ved hjelp av CSS -egenskaper?

For å sette et bilde på nettet med teksten, CSS “vertikal-align”Eiendom med verdien”midten”Og“vise" som "på linje”Kan brukes.

Trinn 1: Lag Main Div Container

Først må du lage en DIV -beholder ved hjelp av “”Merk og legg til en ID -attributt med et spesifikt navn.

Trinn 2: Lag en nestet divcontainer

Neste, lag en neste beholder mellom den første “div”Beholder og sett inn en“klasse”Attributt med et bestemt navn. Deretter innebygde tekst mellom “Div” -merket.

Trinn 3: Legg til et bilde

Etter det, legg til et bilde ved å bruke "" stikkord. Legg deretter til de nedenfor-listede attributtene i bildekoden:

• • “src”Brukes til å legge til mediefilen. For å gjøre det, har vi angitt filnavnet som denne attributtverdien.
  • “bredde”Og“høyde”Bestemmer størrelsen på det ekstra bildeelementet:

Naturen er en dyrebar gave til hele menneskeheten og andre organismer.

Det gir oss frisk luft, oksygen og skjønnhet.

Produksjon

Trinn 4: Stil “div” container

Få tilgang til DIV -elementet ved hjelp av verdien av IDen som “#hoved”:

#hoved
Margin: 30px 80px;
bakgrunnsfarge: RGB (217, 252, 203);
Grense: 3px solid grønn;
polstring: 30px;

Bruk deretter CSS -egenskapene som er nevnt i ovennevnte kodebit:

• • “margin”Definerer et rom utenfor den definerte grensen.
  • “bakgrunnsfarge”Eiendom tildelte fargen på baksiden av det definerte elementet.
  • “grense”Bestemmer en grense rundt elementet.
  • “polstring”Brukes til å legge til plassen inne i den definerte grensen.

Trinn 5: Lag bilde på nettet med tekst

Få tilgang til den nestede divcontaineren med klassenavnet “.hovedinnhold”Og bruk de listede CSS -egenskapene:

.hovedinnhold
Høyde: 100px;
Bredde: 200px;
vertikal-align: midten;
Display: Inline;

Her:

• • “høyde”Og“bredde”Egenskaper brukes til å sette elementets størrelse.
  • “vertikal-align”Brukes til å stille den vertikale justeringen som“midten”.
  • “vise”Kontrollerer hvordan et element håndteres som en blokk- eller inline -komponent, samt arrangementet av barna.

Produksjon

Det handler om å sette et bilde på nettet med teksten.

Konklusjon

For å sette bildet på nettet med teksten, legg først til et bilde og tekst i DIV -beholderen. Deretter kan brukeren bruke inline styling i HTML og bruke CSS -egenskaper. For å gjøre det, bruk "vertikal-align”CSS -egenskap med verdien”midten”Og“vise" angitt som "på linje”For å sette bildet på linje med teksten. Dette innlegget forklarte metoden for å sette bildet på nettet med teksten.