Paano Patayong Igitna ang isang div Element para sa lahat ng Browser Gamit ang CSS

Sa web development, napakahalaga na lumikha ng maayos na layout ng elemento. Gayunpaman, maraming mga katangian ng CSS, tulad ng CSS3 Flexible Box, ay kapaki-pakinabang para sa pagsasaayos ng layout ng mga web page at mga elemento ng HTML. Ang Flexible Box ay ginagamit upang ayusin ang mga web page at application sa isang recursive na paraan. Tumutulong ang Flexbox mode na ito na lumikha ng mga layout para sa mga kumplikadong web page at application.

Gagabayan ka ng post na ito kung paano isentro ang isang elemento ng div para sa lahat ng mga browser gamit ang CSS nang patayo.

Paano I-align ang div Element Gamit ang CSS?

Ang elemento ng div ay maaaring patayo na nakahanay sa pamamagitan ng paggamit ng display property ' baluktot 'kasama ang CSS' align-item ' ari-arian at ' justify-content ” ari-arian. Ini-align ng property na 'align-item' ang elemento nang patayo, at ang property na 'justify-content' ay ini-align ang content nang pahalang.

Halimbawa: Paano Vertically Center a div Element With CSS?

Sa HTML, una, magdagdag ng '

'elemento at italaga ito sa klase' pangunahing nilalaman ”. Sa pagitan ng mga tag na “

”, magdagdag ng “ ” elemento na may mga sumusunod na katangian:

---

---

• “ src Ang katangian ng ” ay ginagamit upang tukuyin ang URL ng larawan.
• “ lahat Tinutukoy ng katangian ng ” ang ilang text na ipapakita bilang kapalit ng isang imahe kung nabigo itong mag-load.
• “ lapad 'Ang attribute ay ginagamit upang ayusin ang lapad ng larawan.
• Pagkatapos, idagdag ang '

  ” elemento upang i-embed ang talata sa pahina.

Narito ang HTML code:

< div klase = 'pangunahing nilalaman' >
< img src = '/images/laptop-notepad.jpg' lahat = 'Laptop na may notepad at panulat' lapad = '300' >
< p > Ang laptop ay isang portable na computer na kilala rin bilang isang notebook computer. p >
div >

Sa CSS, tutukuyin namin ang ilang katangian ng pag-istilo sa div.

Istilo ang 'pangunahing nilalaman' na Klase

.pangunahing nilalaman {
taas: limampu % ;
kulay ng background: #46C2CB;
laki ng font: 24px;
padding: 10px;
}

Ang mga sumusunod na katangian ng CSS ay tinukoy sa ' pangunahing nilalaman 'klase:

• “ taas Ang ” property ay ginagamit upang ayusin ang taas ng
  container.
• “ kulay ng background ” ay tumutukoy sa kulay ng background ng elemento.
• “ laki ng font ” ay tumutukoy sa laki ng font ng elemento.
• “ padding Ang ” property ay nagtatakda ng espasyo sa paligid ng nilalaman ng elemento.

Mula sa output, maaari mong obserbahan na ang nilalaman ng elemento ng div ay wala sa gitna:

Sumulong tayo para ilapat ang mga katangian ng CSS na tumutulong na isentro ang '

” elemento nang patayo. Idagdag ang mga katangiang ito sa klase ' pangunahing nilalaman ” na ginagamit para ma-access ang

element:

display: baluktot ;
align-item: center;

Narito ang paglalarawan:

• “ display ' ari-arian ' baluktot Ang ” ay ginagamit upang gawing flexible ang layout ng div sa elemento nito.
• “ align-item 'Ang CSS property ay nakatakda bilang isang ' gitna ”, na patayong ihanay ang mga elemento ng div.

Output

Natutunan mo kung paano igitna ang isang elemento ng div nang patayo para sa lahat ng browser gamit ang CSS.

Konklusyon

Upang patayo na isentro ang isang elemento ng div, ang CSS ' display 'Ang ari-arian ay ginagamit sa ' baluktot ” halaga. Ginagawang flexible ng value na ito ang

container sa mga elemento nito. Upang patayong ihanay ang elemento ng div, ayusin ang ' align-item ” property at italaga ito ng “ gitna ” halaga. Ipinakita sa iyo ng blog na ito kung paano gamitin ang CSS upang patayo na isentro ang mga elemento ng div sa lahat ng browser.