Jinsi Ya Kufanya Wavuti Iwe Katikati

Orodha ya maudhui:

Jinsi Ya Kufanya Wavuti Iwe Katikati
Jinsi Ya Kufanya Wavuti Iwe Katikati

Video: Jinsi Ya Kufanya Wavuti Iwe Katikati

Video: Jinsi Ya Kufanya Wavuti Iwe Katikati
Video: Волшебная палочка для МОЛОДОСТИ. Урок 1 - Му Юйчунь суставы шея локти. 2024, Novemba
Anonim

Kurasa nyingi leo zimewekwa kwa kutumia tabaka (div), kwa hivyo shida ya kuweka tovuti katikati ya dirisha la kivinjari imepunguzwa kwa jukumu la kuweka safu ambayo huamua upana wa eneo linaloonekana la ukurasa. Ili iweze kuwekwa katikati ya dirisha, ni muhimu kuweka mipangilio inayofaa kwa kipengee cha mzazi wake, au kwa kizuizi hiki yenyewe.

Jinsi ya kufanya wavuti iwe katikati
Jinsi ya kufanya wavuti iwe katikati

Ni muhimu

Ujuzi wa kimsingi wa lugha za HTML na CSS

Maagizo

Hatua ya 1

Weka safu ambayo unataka kuweka katikati ya dirisha, kati ya sehemu za kufungua na kufunga za kitambulisho cha kituo, ikiwa unataka kufanya tu kutumia njia za lugha ya HTML (Lugha ya Markup ya HyperText - "lugha ya markup ya maandishi"). Tutafikiria kuwa mzazi wa safu inayofafanua mipaka ya ukurasa ni mwili wa ukurasa huu. Toleo rahisi zaidi la nambari ya HTML inayotumia lebo ya katikati katika kesi hii inaweza kuonekana kama hii:

Ukurasa wa katikati

maandishi ya ukurasa

Hatua ya 2

Ikiwa unataka kutumia CSS (Karatasi za Sinema za Kuingiza) kuweka katikati ukurasa, tumia ukubwa wa kiotomatiki wa padding kutoka kwa mipaka ya dirisha la kivinjari. Ukubwa wa margin katika CSS imedhamiriwa na parameter ya margin. Ondoa vitambulisho vya kituo kutoka kwenye sampuli iliyopita na ongeza parameter ya margin ya 0 auto kwa sifa ya mtindo wa safu ambayo inafafanua upana wa ukurasa:

Ukurasa wa katikati

maandishi ya ukurasa

Hatua ya 3

Kwa kweli, ufafanuzi wa mtindo unaweza kutolewa nje ya sifa ya mtindo na kuwekwa kwenye faili ya nje au kwenye kichwa cha waraka (kati ya vitambulisho na vitambulisho). Katika kesi hii, nambari hiyo hiyo itaonekana kama hii:

Ukurasa wa katikati

Sura ya #

upana: 700px;

urefu: 400px;

historia: # 0BB;

margin: 0 auto;

}

maandishi ya ukurasa

Ilipendekeza: