Pangilia div upande wa kushoto. Kupanga picha kwenye kingo za kulia na kushoto katika css. Mfano wa nambari ya html ya kupanga picha kulia katika css (wazi haihitajiki)

Siku njema kwa wote. Alexey Gulynin anawasiliana. Katika makala ya mwisho tulijadili Lebo za HTML za kufanya kazi na maandishi. Ni wakati wa kukabiliana nayo jinsi ya kupanga maandishi kwenye ukurasa wa HTML. Ikiwa umegundua, kila kitu ulichoandika hapo awali kimepangwa kwenye ukingo wa kushoto wa kivinjari, na hatufanyi chochote, hivi ndivyo kinavyofanya kazi kwa chaguo-msingi. Tunapaswa kufanya nini ili kuoanisha maudhui, tuseme, katika kituo? Lebo ya kizamani inakuja akilini

. Kwa sasa siitumii popote, lakini nadhani itakuwa muhimu kwako kuijua. Hebu tuandike msimbo wa ukurasa wetu na tuweke maandishi katikati. Ili kufanya hivyo, unahitaji kuweka maandishi au kitu kingine chochote (kwa mfano, picha) kati ya vitambulisho
:

Kupanga Vipengele katika HTML

Maandishi ya upande wa kushoto

Maandishi ya kati



Baada ya kufungua ukurasa katika kivinjari, tutaona kwamba maandishi ni kweli iko katikati ya ukurasa.
Ningependa kuteka mawazo yako kwa hatua hii: unaweza kuamua ikiwa kuna lebo

- hiyo inamaanisha lazima kuwe na vitambulisho , Na . Kufunga yaliyomo kwenye lebo utaona kwamba maandishi ni kweli iko upande wa kushoto. Lakini haitakuwa kwa sababu umeweka lebo , lakini kwa sababu kivinjari kwa chaguo-msingi hupanga vipengele vyote kutoka kushoto kwenda kulia, kutoka juu hadi chini. Kwa kuwa kivinjari hakijui lebo alikosa tu. Lebo Na haipo.

Tunapaswa kufanya nini ikiwa tunataka kuweka vipengele upande wa kulia? Hebu tuangalie dhana ya chombo

, maarifa ambayo ni ya lazima kwa mpangilio wa tovuti wa block-msingi. Pia kuna mpangilio wa meza. Mada hizi 2 zinastahili tahadhari maalum, kwa hiyo tutazungumzia juu yao katika makala tofauti.
Kipengele
ni chombo ambacho kinaweza kujumuisha vipengele vingine vyovyote, pamoja na vyombo vingine
. Kwenye tagi
kuna sifa ya kulandanisha, ambayo inawajibika kwa jinsi ya kuweka chombo kwenye ukurasa. Sifa hii ina thamani kushoto , katikati , kulia . Wacha tuandike nambari fulani ili kuweka vipengee katika sehemu tofauti za kivinjari:

Kupanga Vipengele katika HTML

Maandishi ya kushoto
Maandishi yaliyo katikati
Maandishi sahihi


Katika makala hii umejifunza panga maandishi kwenye ukurasa wa html.

Baadhi ya maudhui katika sehemu hii huenda yasitumike kwa baadhi ya lugha.

Upangaji wa maandishi ni sifa ya uumbizaji wa aya ambayo huamua mwonekano wa maandishi katika aya yote. Kwa mfano, katika aya ambayo imepangiliwa kushoto (mpangilio wa kawaida), maandishi yamepangwa kwenye ukingo wa kushoto. Katika aya iliyohalalishwa, maandishi yamepangwa kwenye pambizo zote mbili.

Pangilia maandishi katikati

Kupanga maandishi kwa upana

Usambazaji wa maandishi

    Kwenye kichupo nyumbani katika Group aya Fanya mojawapo ya yafuatayo:

Kazi

Timu

Pangilia maandishi kushoto

Mpangilio wa maandishi katikati

Pangilia maandishi katikati

Kupanga maandishi kwa upana

Pangilia maandishi kushoto, katikati au kulia

    Bofya popote katika aya unayotaka kuoanisha.

    Kwenye kichupo nyumbani V Aya Fanya mojawapo ya yafuatayo:

Kazi

Timu

Pangilia maandishi kushoto

Pangilia maandishi kushoto

Pangilia maandishi katikati

Pangilia maandishi katikati

Pangilia maandishi kulia

Kupanga maandishi kulia

Kupanga maandishi kwa upana

Maandishi ya kuhalalisha huongeza nafasi kati ya maneno ili kingo zote mbili za kila mstari zipatanishwe na pambizo zote mbili. Mstari wa mwisho wa aya umepangwa kushoto.

Wengi wetu tumekuwa na wazo wazi la ukurasa ulioundwa kikamilifu tangu shuleni. Kutawanyika hata kwa herufi, mistari nyembamba ya maneno, mstatili madhubuti wa maandishi yaliyoandaliwa na pembezoni - hii ndio picha tunayoona tunapochapisha chapisho lolote lililochapishwa. Kuna jaribu kubwa la kuonyesha kitu sawa kwenye ukurasa wa wavuti, haswa kwani njia inayojulikana inapendekezwa kwa hii - upatanishi wa maandishi. Walakini, kinachofaa kwa mtunzi wa chapa ni dhambi ya mauti kwa mbuni wa wavuti. Na yote kwa sababu, inapotumiwa kwa markup ya tovuti, kazi hii imejaa mapungufu mengi kwamba faida yake pekee kwa namna ya makali ya laini ya kulia huisha tu mbele ya macho yetu. Hapa kuna sababu chache tu kwa nini unapaswa kuacha kuhalalisha ili kupendelea upangaji wa kushoto.

Mchanganyiko unaoonekana ndani ya kizuizi cha maandishi

Ndio, ndio, kando laini ya kizuizi cha maandishi, ndivyo machafuko yanavyoonekana ndani yake. Katika uchapaji, safu nzima ya zana hukuruhusu kufikia uthabiti katika maandishi: hyphenation, kurekebisha nafasi kati ya maneno na umbali kati ya herufi, na hata chaguzi za fonti pana au nyembamba kidogo. Lakini mpangilio wa ukurasa wa Mtandao unapendekeza, kama sheria, njia moja tu ya "kunyoosha" mstari kutoka makali hadi makali - ongezeko lisilodhibitiwa la upana wa nafasi. Sio tu kwamba hii inasababisha kuonekana kwa mapengo yasiyofaa kati ya maneno, lakini mapungufu haya, kana kwamba kwa sheria ya ubaya, mara nyingi huanguka takriban mahali sawa katika kila mstari, na kutengeneza kinachojulikana kama "mito" ya wima. Yote hii inatoa maandishi kuonekana nadhifu sana.

Kutosomeka

Lakini ikiwa aesthetics bado inaweza kutolewa kwa ajili ya kingo safi, basi matatizo ya wazi na mtazamo wa kuona wa maandishi bado ni bei ya juu sana kuwalipa. Na maandishi yaliyosahihishwa hayasomeki kwa hakika kuliko maandishi yaliyopangiliwa kushoto. Sababu kuu iko katika vipindi sawa vya kuongezeka kati ya maneno: jicho linalazimishwa kila wakati kutafuta mwanzo wa neno linalofuata, na kwa sababu ya tofauti za nafasi kutoka kwa mstari hadi mstari, pia inalazimika kurekebisha kutoka umbali mmoja hadi mwingine. .

Haja ya kufanya kazi kwa urefu wa mstari, mara nyingi bila matokeo

Kwa haki, ni muhimu kuzingatia kwamba hasara zilizotambuliwa za maandishi ya haki zinaweza kupunguzwa kwa kuongeza urefu wa mstari. Hata hivyo, njia hii haitakuwa na ufanisi kila wakati. Lakini inaweza kupunguza usomaji kwa kiwango cha juu sana cha uwezekano: ni vigumu kwa macho, baada ya kuchambua mstari mmoja mrefu hadi mwisho, kwa usahihi na haraka kuruka hadi mwanzo wa ijayo.

Haifai kwa vifaa vya rununu

Kadiri safu wima yenye maandishi inavyopungua, ndivyo inavyokuwa chini ya upangaji. Na hapa muundo huu unakuja katika mgongano wa moja kwa moja na mahitaji ya vifaa vya simu, ambayo, kinyume chake, mstari mfupi, ni bora zaidi. Kubali, ni jambo moja kufuata mstari mrefu kwenye kifuatilizi cha skrini nzima kwa macho yako, na jambo lingine kabisa kusogeza kila mstari huku na huko tena na tena. Furaha ya kutilia shaka, lakini njia ya uhakika ya kupoteza hadhira yako ya rununu!

Inaweza kuonekana kuwa ikiwa tunaweza kuongeza kitendakazi cha kufungia maneno kwenye ukurasa, matatizo haya yote yanayotokea wakati wa kupanga maandishi kwa upana wa ukurasa yangetatuliwa. Lakini kinachovutia ni kwamba alama ya HTML haitoi kazi kama hiyo. Kwa hiyo inageuka kuwa leo hakuna njia nyingine ya kudumisha nafasi inayokubalika kati ya maneno kwenye ukurasa wa wavuti isipokuwa kuunganisha maandishi kwa makali.

Kwa hivyo, wakati wa kuunda ukurasa wa mtandao, ni muhimu kukumbuka jambo kuu: tovuti sio kitabu, na unahitaji kukabiliana na muundo wake kutoka kwa nafasi zilizoagizwa na teknolojia na saikolojia ya mtazamo, na si kwa maoni ya aesthetic ya mtu. hata hivyo, sana, masharti sana. Niamini, ikiwa maandishi yako yamewekwa vizuri na, kwanza kabisa, yanasomeka kwa urahisi na kwa raha, hakuna mtu atakayezingatia kitu kidogo kama pembe zisizo sawa!

Kwa njia, unaposoma makala hii, uliona kwamba maandishi hayana haki?

Habari! Tunaendelea kufahamu misingi ya lugha ya HTML. Hebu tuone unachohitaji kuandika ili kuoanisha maandishi katikati, upana au kingo.

Kuingia kwenye biashara, hebu tuangalie jinsi ya kuweka maandishi katikati katika HTML kwa njia tatu tofauti. Mbili za mwisho zimeunganishwa moja kwa moja kwenye karatasi ya mtindo. Inaweza kuwa faili ya CSS inayounganisha kwenye kurasa za tovuti na kufafanua muonekano wao.

Njia ya 1 - kazi ya moja kwa moja na HTML

Kwa kweli ni rahisi sana. Tazama mfano hapa chini.

Pangilia aya katikati.

Ikiwa unahitaji kusonga vipande vya maandishi kwa njia tofauti, basi badala ya kigezo cha "katikati", ingiza maadili yafuatayo:

  • kuhalalisha - panga maandishi kwa upana wa ukurasa;
  • kulia - kwenye makali ya kulia;
  • kushoto - kushoto.

Kwa mlinganisho, unaweza kusogeza maudhui yaliyo kwenye vichwa (h1, h2) na kontena (div).

Njia ya 2 na 3 - kutumia mitindo

Muundo uliowasilishwa hapo juu unaweza kubadilishwa kidogo. Athari itakuwa sawa. Ili kufanya hivyo, unahitaji kuandika kanuni hapa chini.

Kizuizi cha maandishi.

Katika fomu hii, msimbo umeandikwa moja kwa moja kwenye HTML ili kuweka maudhui ya maandishi katikati.

Kuna njia nyingine mbadala ya kufikia matokeo. Utahitaji kufanya hatua kadhaa.

Hatua ya 1. Katika kanuni kuu andika

Nyenzo za maandishi.

Hatua ya 2. Katika faili ya CSS iliyojumuishwa, weka msimbo ufuatao:

Rovno (panga maandishi: katikati;)

Ninaona kuwa neno "rovno" ni jina tu la darasa ambalo linaweza kuitwa tofauti. Hii imeachwa kwa hiari ya mpangaji programu.

Kwa mlinganisho, katika HTML unaweza kwa urahisi kufanya maandishi kuwa katikati, kuhalalishwa, na kuunganishwa kwa ukingo wa kulia au kushoto wa ukurasa. Kama unaweza kuona, kuna chaguo zaidi ya moja kufikia lengo lako.

Maswali machache tu:

  • Je, unafanya mradi wa habari usio wa faida?
  • Je! unataka tovuti yako iwe na nafasi nzuri katika injini za utaftaji?
  • Je, ungependa kupata mapato mtandaoni?

Ikiwa majibu yote ni chanya, basi angalia tu mbinu jumuishi ya maendeleo ya tovuti. Taarifa itakuwa muhimu hasa ikiwa inaendeshwa kwenye WordPress CMS.

Ningependa kusema kwamba tovuti zako ni mojawapo tu ya chaguo nyingi za kuzalisha mapato ya passiv au amilifu kwenye Mtandao. Blogu yangu imejitolea kwa fursa za kifedha mtandaoni.

Umewahi kufanya kazi katika uwanja wa usuluhishi wa trafiki, uandishi wa nakala na maeneo mengine ya shughuli ambayo hutoa mapato ya msingi au ya ziada kupitia ushirikiano wa mbali? Unaweza kujifunza kuhusu hili na mengi zaidi hivi sasa kwenye kurasa za blogu yangu.

Nitachapisha habari nyingi muhimu sana katika siku zijazo. Endelea kuwasiliana. Ukipenda, unaweza kujiandikisha kupokea masasisho ya Workip kwa barua pepe. Fomu ya usajili iko hapa chini.

Mpangilio wa maandishi huamua mwonekano wake na mwelekeo wa kingo za aya na inaweza kushoto, kulia, katikati, au kuhalalishwa. Katika meza Kielelezo cha 1 kinaonyesha chaguo za kupanga maandishi.

Jedwali 1. Njia za kupanga maandishi
Mpangilio wa kushoto Mpangilio wa kulia Mpangilio wa katikati Kuhesabiwa haki
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Chaguo la kawaida ni likiwa limepangiliwa kushoto, ambapo maandishi yaliyo upande wa kushoto yanasukumwa hadi ukingoni huku maandishi yaliyo upande wa kulia yakibaki kuwa nyororo. Mpangilio wa kulia na katikati hutumiwa kimsingi katika vichwa na vichwa vidogo. Kumbuka kwamba wakati wa kutumia kuhesabiwa haki, nafasi kubwa zinaweza kuonekana kati ya maneno katika maandishi, ambayo sio ya kuvutia sana.

Lebo ya aya kwa kawaida hutumiwa kuweka upatanishi wa maandishi

Na sifa ya kulandanisha, ambayo inabainisha mbinu ya upatanishi. Inawezekana pia kusawazisha kizuizi cha maandishi kwa kutumia lebo

na sifa sawa ya kulandanisha, kama inavyoonyeshwa kwenye jedwali. 2.

Jedwali 2. Kupanga maandishi kwa kutumia parameta ya kulandanisha
msimbo wa HTML Maelezo
Huongeza aya mpya ya maandishi, iliyoachwa ikiwa imepangiliwa kwa chaguomsingi. Indenti ndogo za wima huongezwa kiotomatiki kabla na baada ya aya.

Maandishi

Mpangilio wa katikati.

Maandishi

Mpangilio wa kushoto.

Maandishi

Maandishi

Mpangilio wa upana.
Maandishi Huzima ufungaji wa mstari kiotomatiki, hata kama maandishi ni mapana kuliko dirisha la kivinjari.
Maandishi Huruhusu kivinjari kuvunja mstari katika eneo lililobainishwa, hata kama lebo itatumika .
Maandishi
Mpangilio wa katikati.
Maandishi
Mpangilio wa kushoto.
Maandishi
Mpangilio wa kulia.
Maandishi
Mpangilio wa upana.

Mpangilio wa kushoto wa vipengee umewekwa na chaguo-msingi, kwa hivyo hakuna haja ya kutaja tena. Kwa hivyo align="left" inaweza kuachwa.

Tofauti kati ya aya (tag

) na tag

ni kwamba ujongezaji wima unaonekana mwanzoni na mwisho wa aya, ambayo sivyo wakati wa kutumia lebo.
.

Sifa ya kupanga ni ya ulimwengu wote na inaweza kutumika sio tu kwa maandishi kuu, lakini pia kwa vichwa kama vile.

. Mfano wa 1 unaonyesha jinsi ya kuweka usawa katika kesi kama hiyo.

Mfano 1: Mpangilio wa Maandishi

Mpangilio wa maandishi

Jinsi ya kukamata simba?

Mbinu ya nguvu ya brute

Tunagawanya jangwa katika idadi ya maeneo ya msingi, saizi yake ambayo inalingana na vipimo vya jumla vya simba, lakini ni ndogo kuliko saizi ya ngome. Ifuatayo, kwa utafutaji rahisi tunaamua eneo ambalo simba iko, ambayo inaongoza kwa kukamata kwake moja kwa moja.

Mbinu ya Dichotomy

Tunagawanya jangwa katika nusu mbili. Katika sehemu moja kuna simba, katika sehemu nyingine hakuna. Tunachukua nusu ambayo simba iko na kuigawanya kwa nusu tena. Tunarudia hivyo hadi simba ashikwe.



Matokeo ya mfano yanaonyeshwa kwenye Mtini. 1.

Mchele. 1. Pangilia maandishi kulia na kushoto

Katika mfano huu, kichwa kimewekwa katikati ya dirisha la kivinjari, aya iliyoangaziwa inalingana na kulia, na maandishi ya mwili yanaunganishwa upande wa kushoto.