Paano Ihanay ang Mga Imahe at Teksto nang Madaling Sumagot

Hakbang 2: Ilapat ang CSS

Sa lalagyan:

• Ngayon, isentro ang nilalaman sa pamamagitan ng paglalapat ng CSS sa “ Lalagyan ” klase.
• Itakda ang ' baluktot 'halaga sa ari-arian' display ” para gumawa ng flexbox.
• Itakda ang “align-item ” ari-arian sa “ gitna ” value upang patayong igitna ang pagkakahanay.
• Itakda ang ' justify-content ” value ng property sa “center” para pahalang na igitna ang alignment.
• Panghuli, tukuyin ang halaga ' gitna 'sa ari-arian' text-align ” para igitna ang teksto.

Naka-on :

• Tukuyin ang ' max-width ' ari-arian sa halaga ' gitna ” upang matiyak na ang imahe ay nakaka-scale kasama ng lalagyan nito.
• Tukuyin ang halaga ' sasakyan ' sa ' taas ” property upang mapanatili ang aspect ratio ng larawan.

Sa text:

• Itakda ang laki ng font ng teksto sa “ 16px ” sa pamamagitan ng pagtukoy ng value na “16px” sa “ laki ng font ”.
• Tukuyin ang lapad ng teksto sa pamamagitan ng pagtatalaga ng ' max-width ' ari-arian isang halaga ng ' 390px ”:

Maaaring maobserbahan na ang teksto ay patayo na nakasentro, at ang imahe ay pahalang na nakasentro:

Halimbawa 2: I-align sa Kaliwa ang Teksto at ang Tumutugon na Larawan

Sa ibinigay na halimbawang ito, ang larawan at ang teksto ay magiging nakahanay sa kaliwa. Para sa layuning iyon, dumaan sa sumusunod na sunud-sunod na mga tagubilin:

Hakbang 1: Gumawa ng HTML Structure

Ang HTML code ay pareho sa itaas, na ginamit sa halimbawa.

Hakbang 2: Ilapat ang CSS

Sa lalagyan:

• Itakda ang ' pagbaluktot-direksyon 'halaga ng ari-arian sa ' hanay ” upang i-stack ang mga item nang patayo sa maliliit na screen.
• Itakda ang ' align-item 'halaga ng ari-arian sa ' flex-start ” sa kaliwa upang ihanay ang mga item.
• Panghuli, itakda ang property ' text-align ' sa ' umalis ” property para i-left-align ang text.

Naka-on :

• Kapareho ng ginamit sa halimbawa sa itaas.

Sa text:

• Pareho sa ginamit sa halimbawa sa itaas:

Kinukumpirma ng output na ang teksto at larawan ay nakahanay sa kaliwa:

Konklusyon

Upang ihanay ang mga larawan at teksto nang tumutugon, gumawa muna ng grid o flex na layout sa CSS, pagkatapos ay itakda ang ' align-item 'halaga ng ari-arian sa ' gitna ”. Ang paggawa nito ay maghahanay ng mga larawan at teksto nang tumutugon sa CSS. Ang write-up na ito ay nagbigay sa mga user ng kumpletong gabay upang ihanay ang mga imahe at teksto nang tumutugon.