Jak umieścić obraz w linii z tekstem

Podczas publikowania artykułów badawczych wykorzystywane są obrazy z danymi tekstowymi do lepszego zrozumienia użytkownika. Obrazy wbudowane są wykorzystywane do przekazywania wartości i informacji. Obsługuje także szeroki zakres formatów danych, w tym „GIF”, „JPG”, „PNG” i „SVG”. Ponadto użytkownicy mogą również wykorzystać ten format do tworzenia strony internetowej. Aby to zrobić, HTML/CSS zapewnia różne właściwości, aby dodać obraz w linii z tekstem.

Ten zapis wyjaśni:

• • Metoda 1: Jak umieścić obraz w linii z tekstem w HTML?
  • Metoda 2: Jak umieścić obraz w linii z tekstem za pomocą właściwości CSS?

Metoda 1: Jak umieścić obraz w linii z tekstem w HTML?

Aby umieścić obraz w linii z tekstem w HTML, użyj stylizacji inline w HTML. Aby to zrobić, postępuj zgodnie z danymi instrukcjami.

Krok 1: Dodaj obraz

Początkowo dodaj obraz za pomocą „”Tag. Następnie zastosuj stylizację inline, wykorzystując „styl" atrybut. Opis atrybutu jest wspomniany poniżej:

• • HTML "styl”Tag zawiera kilka właściwości CSS i par, które można wykorzystać bezpośrednio. Aby to zrobić, wartość tego atrybutu jest ustawiona jako „Pion-align: środkowy".
  • „„Pion-align„Nieruchomość jest stosowana w celu kontrolowania pionowego wyrównania elementu.
  • "src”Służy do wstawienia pliku multimedialnego do elementu.

Krok 2: Zrób pojemnik „Div”

Następnie użyj „„Element do stworzenia kontenera Div na stronie HTML. Następnie wstaw „styl”Atrybut z następującymi wartościami:

• • "Pion-align: środkowy”Jest ustawiony do stylizacji i ustawiania wyrównania kontenera.
  • "Wyświetl: Inline„Mówi elementowi, aby pasował do tej samej linii.
  • Następnie osadziłem tekst między „div”Tag:

Natura zapewnia nam pokój.

Można zauważyć, że obraz został dodany w linii z tekstem na stronie HTML:

Metoda 2: Jak umieścić obraz w linii z tekstem za pomocą właściwości CSS?

Aby umieścić obraz w linii z tekstem, CSS ”Pion-align„Własność o wartości”środek" I "wyświetlacz" Jak "Wline”Można zastosować.

Krok 1: Utwórz główny kontener Div

Najpierw utwórz kontener DIV za pomocą „”Tag i dodaj atrybut ID o określonej nazwie.

Krok 2: Utwórz zagnieżdżony kontener DIV

Następnie utwórz następny pojemnik między pierwszym „div”Pojemnik i wstaw„klasa”Atrybut o określonej nazwie. Następnie osadziłem tekst między znacznikiem „div”.

Krok 3: Dodaj obraz

Następnie dodaj obraz, wykorzystując „”Tag. Następnie dodaj poniżej listy atrybutów w znaczniku obrazu:

• • "src”Służy do dodania pliku multimedialnego. Aby to zrobić, ustawiliśmy nazwę pliku jako tę wartość atrybutu.
  • "szerokość" I "wysokość”Określa rozmiar dodanego elementu obrazu:

Natura jest cennym darem dla wszystkich ludzkości i innych organizmów.

Zapewnia nam świeże powietrze, tlen i piękno.

Wyjście

Krok 4: Style „Div” pojemnik

Uzyskaj dostęp do elementu DIV za pomocą wartości identyfikatora jako „#główny”:

#główny
Margines: 30px 80px;
kolor tła: RGB (217, 252, 203);
granica: 3px solidny zielony;
Wyściółka: 30px;

Następnie zastosuj właściwości CSS wspomniane w powyższym fragmencie kodu:

• • "margines”Definiuje przestrzeń poza zdefiniowaną granicą.
  • "kolor tła„Obiekt przydzielił kolor z tyłu zdefiniowanego elementu.
  • "granica”Określa granicę wokół elementu.
  • "wyściółka”Służy do dodawania przestrzeni wewnątrz zdefiniowanej granicy.

Krok 5: Zrób obraz w linii z tekstem

Uzyskaj dostęp do zagnieżdżonego kontenera Div z nazwą klasy „.główna zawartość”I zastosuj wymienione właściwości CSS:

.główna zawartość
Wysokość: 100px;
szerokość: 200px;
Pion-align: środkowy;
Wyświetl: Inline;

Tutaj:

• • "wysokość" I "szerokość„Właściwości są wykorzystywane do ustawiania rozmiaru elementu.
  • "Pion-align”Służy do ustawiania wyrównania pionowego jako„środek".
  • "wyświetlacz”Kontroluje, w jaki sposób element jest obsługiwany jako komponent blokowy lub wbudowany, a także rozmieszczenie jego dzieci.

Wyjście

Chodzi o umieszczenie obrazu w linii z tekstem.

Wniosek

Aby umieścić obraz w linii z tekstem, najpierw dodaj obraz i tekst w pojemniku Div. Następnie użytkownik może użyć stylizacji inline w HTML i zastosować właściwości CSS. Aby to zrobić, zastosuj „Pion-align„Właściwość CSS o wartości”środek" I "wyświetlacz" ustawiony jako "Wline„Aby umieścić obraz w linii z tekstem. W tym poście wyjaśniono metodę umieszczenia obrazu w linii z tekstem.