Mga pamamaraan para sa vertical center alignment sa CSS. Pagsentro sa div at iba pang mga subtlety sa pagpoposisyon
Kadalasan sa panahon ng layout ay may pangangailangan para sa patayong pagkakahanay ng teksto sa isang bloke. Kung kailangan itong gawin sa isang table cell, itatakda ang value ng vertical-align CSS property.
Ngunit lumitaw ang isang makatwirang tanong: posible bang gawin nang walang talahanayan, nang hindi na-overload ang layout ng page na may mga hindi kinakailangang tag? Ang sagot ay "magagawa mo," ngunit dahil sa mahinang suporta ng CSS sa MSIE browser, ang solusyon sa problema para dito ay magiging iba sa solusyon para sa iba pang mga karaniwang browser.
Bilang halimbawa, isaalang-alang ang sumusunod na fragment:
Ilang text
at subukang patayo na ihanay ang teksto sa gitna ng bloke at sa ilalim na gilid ng bloke.
Solusyon sa problema
"Tama" na mga browser (kabilang ang MSIE
Karamihan sa mga modernong browser ay sumusuporta sa CSS2.1, katulad ng table-cell value para sa display property. Nagbibigay ito sa amin ng pagkakataong pilitin ang isang bloke ng text na lumabas bilang isang table cell at, sinasamantala ito, ihanay ang teksto nang patayo:
div(
display: table-cell;
vertical-align: gitna;
}
div(
display: table-cell;
vertical-align: ibaba;
}
Internet Explorer (hanggang sa bersyon 7 kasama)
Maaari mong lutasin ang problema sa pag-align ng teksto sa ilalim na gilid ng isang bloke sa MSIE gamit ang ganap na pagpoposisyon (dito kakailanganin namin ang isang elemento ng string na naka-nest sa bloke):
div(
posisyon: kamag-anak;
}
div span(
display: block;
posisyon: ganap;
ibaba: 0%;
kaliwa: 0%;
lapad: 100%;
}
Gumagana rin ang hanay ng mga panuntunang ito sa mga "tama" na browser.
Tukuyin ang mga katangian
Div span(
display: block;
lapad: 100%;
}
hindi kinakailangan, ngunit maaaring kailanganin ang mga ito kung, bilang karagdagan sa vertical text alignment, plano mo ring gumamit ng horizontal alignment, halimbawa, text-align: center ;.
Upang patayong ihanay ang teksto sa gitna ng bloke, ang orihinal na fragment ay kailangan pa ring maging kumplikado - ipapakilala namin ang isa pang elemento ng linya:
Materyal na pag-aaralan:
- Vertical Centering sa CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
- Vertical centering gamit ang CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
- Vertical align (www.cssplay.co.uk/ie/valign.html)
- vertical-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
- Isa pang paraan ng vertical alignment sa CSS (cssing.org.ua/2007/04/26/another-css-valign-method)
Magandang araw, mga tagasuskribi at mga mambabasa ng publikasyong ito. Ngayon gusto kong pumunta sa detalye at sabihin sa iyo kung paano isentro ang teksto sa CSS. Sa ilang mga nakaraang artikulo, hindi ko direktang nahawakan ang paksang ito, kaya mayroon kang ilang kaalaman sa lugar na ito.
Gayunpaman, sa publikasyong ito sasabihin ko sa iyo ang tungkol sa lahat ng iba't ibang paraan upang ihanay ang mga bagay, at ipaliwanag din kung paano i-indent at i-redline ang mga talata. Kaya simulan nating pag-aralan ang materyal!
HTML at mga supling nito at ihanay
Ang pamamaraang ito ay halos hindi kailanman ginagamit, dahil ito ay pinalitan ng mga cascading style sheet na tool. Gayunpaman, ang pag-alam na mayroong ganoong tag ay hindi makakasakit sa iyo.
Tulad ng para sa pagpapatunay (ang terminong ito ay inilarawan nang detalyado sa artikulong ""), ang detalye ng html mismo ay kinondena ang paggamit < center>, dahil para sa bisa ito ay kinakailangan na gumamit ng isang paglipat DOCTYPE>.
Ang ganitong urinagbibigay-daan sa mga ipinagbabawal na elemento na dumaan.
Ngayon ay lumipat tayo sa katangian ihanay. Itinatakda nito ang pahalang na pagkakahanay ng mga bagay sa at umaangkop pagkatapos ng deklarasyon ng tag. Karaniwan, maaari itong gamitin upang ihanay ang nilalaman sa kaliwa ( umalis), sa kanang gilid ( tama), nakasentro ( sentro) at sa pamamagitan ng lapad ng teksto ( bigyang-katwiran).
Sa ibaba ay magbibigay ako ng isang halimbawa kung saan ilalagay ko ang larawan at talata sa gitna.
Igitna ang nilalamang ito.
Pakitandaan na para sa larawan ang attribute na aming sinusuri ay may bahagyang magkakaibang kahulugan.
Sa halimbawang ginamit ko align="gitna". Dahil dito, ang imahe ay nakahanay upang ang pangungusap ay matatagpuan nang malinaw sa gitna ng larawan.
Mga tool sa pagsentro sa css
Ang mga katangian ng CSS na idinisenyo upang ihanay ang mga bloke, teksto at graphic na nilalaman ay mas madalas na ginagamit. Pangunahin ito dahil sa kaginhawahan at flexibility ng pagpapatupad ng mga istilo.
Kaya magsimula tayo sa unang pag-aari ng pagsentro ng teksto - ito ay text-ihanay.
Gumagana ito sa parehong paraan tulad ng pag-align sa . Sa mga keyword, maaari kang pumili ng isa mula sa pangkalahatang listahan o magmana ng mga katangian ng isang ninuno ( magmana).
Nais kong tandaan na sa css3 maaari kang magtakda ng 2 higit pang mga parameter: simulan– depende sa mga panuntunan sa pagsulat ng teksto (mula sa kanan papuntang kaliwa o vice versa), itinatakda ang pagkakahanay sa kaliwa o kanan (katulad ng gawain sa kaliwa o kanan) at wakas– ang kabaligtaran ng simula (kapag nagsusulat ng teksto mula kaliwa hanggang kanan ito ay gumaganap bilang kanan, kapag sumusulat mula kanan pakaliwa – kaliwa).
Pangungusap sa kanan
Pangungusap na gumagamit ng wakas
Sasabihin ko sa iyo ang tungkol sa isang maliit na trick. Kapag pumipili ng halaga bigyang-katwiran huling linya maaaring makalawit na hindi magandang tingnan mula sa ibaba. Upang, halimbawa, iposisyon ito sa gitna, maaari mong gamitin ang ari-arian text-align-last.
Upang ihanay ang content ng site o mga cell ng talahanayan nang patayo, gamitin ang property patayo-align. Sa ibaba ay inilarawan ko ang mga pangunahing keyword ng elemento.
| Keyword | Layunin |
| baseline | Tinutukoy ang pagkakahanay sa isang linya ng ninuno, na tinatawag na base line. Kung ang bagay ng ninuno ay walang ganoong linya, pagkatapos ay ang pagkakahanay ay nangyayari sa kahabaan ng mas mababang hangganan. |
| gitna | Ang gitna ng na-mutate na bagay ay nakahanay sa baseline, kung saan idinaragdag ang taas na palapag ng parent element. |
| ibaba | Ang ibaba ng napiling nilalaman ay umaayon sa ilalim ng bagay sa ibaba nito. |
| itaas | Katulad sa ibaba, tanging may tuktok na bahagi bagay. |
| sobrang | Ginagawang superscript ang character. |
| sub | Ginagawang subscript ang elemento. |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
C SA E TTUNGKOL SASA
|
Mga indentasyon
At sa wakas ay dumating tayo sa mga indent ng talata. Gumagamit ang wika ng CSS ng isang espesyal na katangian na tinatawag na text-indent.
Sa tulong nito maaari kang gumawa ng parehong pulang linya at isang protrusion (kailangan mong tukuyin ang isang negatibong halaga).
Upang lumikha ng pulang linya kailangan mo lamang malaman ang isang parameter.
Ito ang simpleng text-indent property.
Sa palagay ko marami sa inyo na kinailangan na humarap sa layout ay nakatagpo ng pangangailangan na ihanay ang mga elemento nang patayo at alam ang mga paghihirap na lalabas kapag inihanay ang isang elemento sa gitna.
Oo, mayroong isang espesyal na multi-value na vertical-align na property sa CSS para sa vertical alignment. Gayunpaman, sa pagsasagawa, hindi ito gumagana gaya ng inaasahan. Subukan nating alamin ito.
Ihambing natin ang mga sumusunod na diskarte. I-align gamit ang:
- mga mesa,
- indentation,
- taas ng linya
- lumalawak,
- negatibong margin,
- ibahin ang anyo
- pseudo element
- flexbox.
Mayroong dalawang elemento ng div, kung saan ang isa sa mga ito ay nakapugad sa loob ng isa pa. Bigyan natin sila ng kaukulang mga klase - panlabas at panloob.
Ang hamon ay ihanay ang panloob na elemento sa gitna ng panlabas na elemento.
Una, isaalang-alang natin ang kaso kapag ang mga sukat ng panlabas at panloob na mga bloke kilala. Idagdag natin ang display ng panuntunan: inline-block sa panloob na elemento, at text-align: center at vertical-align: gitna sa panlabas na elemento.
Tandaan na ang alignment ay nalalapat lamang sa mga elemento na mayroong inline o inline-block na display mode.
Itakda natin ang mga sukat ng mga bloke, pati na rin ang mga kulay ng background upang makita natin ang kanilang mga hangganan.
Panlabas ( width: 200px; height: 200px; text-align: center; vertical-align: middle; background-color: #ffc; ) .inner ( display: inline-block; width: 100px; height: 100px; background-color : #fcc;
Pagkatapos ilapat ang mga estilo ay makikita natin iyon panloob na yunit nakahanay nang pahalang, ngunit hindi patayo:
http://jsfiddle.net/c1bgfffq/
Bakit nangyari ito? Ang bagay ay ang vertical-align na ari-arian ay nakakaapekto sa pagkakahanay ang elemento mismo, hindi ang nilalaman nito(maliban kapag ito ay inilapat sa mga cell ng talahanayan). Samakatuwid, ang paglalapat ng ari-arian na ito sa panlabas na elemento ay hindi gumawa ng anuman. Bukod dito, ang paglalapat ng property na ito sa isang panloob na elemento ay wala ring magagawa, dahil ang mga inline-block ay nakahanay nang patayo sa mga katabing bloke, at sa aming kaso mayroon kaming isang inline na bloke.
Mayroong ilang mga pamamaraan upang malutas ang problemang ito. Sa ibaba ay susuriin natin ang bawat isa sa kanila.
Pag-align gamit ang isang talahanayan
Ang unang solusyon na nasa isip ay ang palitan ang panlabas na bloke ng isang talahanayan ng isang cell. Sa kasong ito, ang pagkakahanay ay ilalapat sa mga nilalaman ng cell, iyon ay, sa panloob na bloke.
http://jsfiddle.net/c1bgfffq/1/
Ang halatang kawalan ng solusyon na ito ay, mula sa isang semantiko na pananaw, hindi tama ang paggamit ng mga talahanayan para sa pagkakahanay. Ang pangalawang kawalan ay upang lumikha ng isang talahanayan kailangan mong magdagdag ng isa pang elemento sa paligid panlabas na yunit.
Maaaring bahagyang alisin ang unang minus sa pamamagitan ng pagpapalit sa table at td tag ng div at pagtatakda ng table display mode sa CSS.
.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Gayunpaman, ang panlabas na bloke ay mananatiling isang talahanayan kasama ang lahat ng mga kasunod na kahihinatnan.
Pag-align gamit ang mga indent
Kung alam ang taas ng panloob at panlabas na mga bloke, maaaring itakda ang pagkakahanay gamit ang mga patayong indent ng panloob na bloke gamit ang formula: (H panlabas – H panloob) / 2.Panlabas ( taas: 200px; ) .panloob ( taas: 100px; margin: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/
Ang downside ng solusyon ay na ito ay naaangkop lamang sa isang limitadong bilang ng mga kaso kapag ang taas ng parehong mga bloke ay kilala.
Pag-align gamit ang taas ng linya
Kung alam mo na ang panloob na bloke ay dapat sumakop ng hindi hihigit sa isang linya ng teksto, maaari mong gamitin ang line-height property at itakda ito na katumbas ng taas ng panlabas na bloke. Dahil ang nilalaman ng panloob na bloke ay hindi dapat i-wrap sa pangalawang linya, inirerekomenda na idagdag din ang white-space: nowrap at overflow: hidden rules.Outer ( height: 200px; line-height: 200px; ) .inner ( white-space: nowrap; overflow: hidden; )
http://jsfiddle.net/c1bgfffq/12/
Gayundin pamamaraang ito ay maaari ding gamitin para i-align ang multiline na text kung i-override mo ang line-height na value para sa inner block at idaragdag din ang display: inline-block at vertical-align: middle rules.
Outer ( height: 200px; line-height: 200px; ) .inner ( line-height: normal; display: inline-block; vertical-align: middle; )
http://jsfiddle.net/c1bgfffq/15/
Ang kawalan ng pamamaraang ito ay dapat malaman ang taas ng panlabas na bloke.
Pag-align gamit ang "stretch"
Ang pamamaraang ito ay maaaring gamitin kapag ang taas ng panlabas na bloke ay hindi alam, ngunit ang taas ng panloob na bloke ay kilala.Upang gawin ito kailangan mo:
- itakda ang kamag-anak na pagpoposisyon sa panlabas na bloke, at ganap na pagpoposisyon sa panloob na bloke;
- idagdag ang mga panuntunan sa itaas: 0 at ibaba: 0 sa panloob na bloke, bilang isang resulta kung saan ito ay mag-uunat sa buong taas ng panlabas na bloke;
- itakda ang patayong padding ng inner block sa auto.
http://jsfiddle.net/c1bgfffq/4/
Ang ideya sa likod ng diskarteng ito ay ang pagtatakda ng taas para sa isang nakaunat at ganap na nakaposisyon na bloke ay nagdudulot sa browser na kalkulahin ang vertical padding sa pantay na ratio kung ito ay nakatakda sa auto .
Pag-align sa negatibong margin-top
Ang pamamaraang ito ay naging malawak na kilala at madalas na ginagamit. Tulad ng nauna, ginagamit ito kapag ang taas ng panlabas na bloke ay hindi alam, ngunit ang taas ng panloob ay kilala.Kailangan mong itakda ang panlabas na bloke sa relatibong pagpoposisyon, at ang panloob na bloke sa ganap na pagpoposisyon. Pagkatapos ay kailangan mong ilipat ang panloob na bloke pababa ng kalahati ng taas ng panlabas na bloke sa itaas: 50% at itaas ito ng kalahati ng sarili nitong taas na margin-top: -H inner / 2.
Panlabas ( posisyon: kamag-anak; ) .panloob ( taas: 100px; posisyon: ganap; tuktok: 50%; margin-itaas: -50px; )
http://jsfiddle.net/c1bgfffq/13/
Ang kawalan ng pamamaraang ito ay dapat malaman ang taas ng panloob na yunit.
Pag-align sa pagbabagong-anyo
Ang pamamaraang ito ay katulad ng nauna, ngunit maaari itong magamit kapag ang taas ng panloob na yunit ay hindi alam. Sa kasong ito, sa halip na magtakda ng negatibong pixel padding, maaari mong gamitin ang transform property at ilipat ang panloob na bloke pataas gamit ang translateY function at isang value na -50% .Panlabas (posisyon: kamag-anak; ) .panloob (posisyon: absolute; itaas: 50%; transform: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/
Bakit imposibleng itakda ang halaga bilang porsyento sa nakaraang pamamaraan? Dahil ang mga halaga ng porsyento ng margin ay kinakalkula na may kaugnayan sa pangunahing elemento, ang halaga na 50% ay magiging kalahati ng taas ng panlabas na kahon, at kakailanganin nating itaas ang panloob na kahon sa kalahati ng sarili nitong taas. Ang pag-aari ng pagbabago ay perpekto para dito.
Ang kawalan ng pamamaraang ito ay hindi ito magagamit kung ang panloob na yunit ay may ganap na pagpoposisyon.
Pag-align sa Flexbox
Karamihan makabagong paraan vertical alignment ay ang paggamit ng Flexible Box Layout (sikat na kilala bilang Flexbox). Binibigyang-daan ka ng module na ito na madaling kontrolin ang pagpoposisyon ng mga elemento sa page, na ayusin ang mga ito halos kahit saan. Ang center alignment para sa Flexbox ay isang napakasimpleng gawain.Ang panlabas na bloke ay kailangang itakda upang ipakita: flex at ang panloob na bloke sa margin: auto . At yun lang! Ang ganda, di ba?
Panlabas ( display: flex; width: 200px; height: 200px; ) .inner ( width: 100px; margin: auto; )
http://jsfiddle.net/c1bgfffq/14/
Ang kawalan ng pamamaraang ito ay ang Flexbox ay sinusuportahan lamang ng mga modernong browser.
Aling paraan ang dapat kong piliin?
Kailangan mong magsimula sa pahayag ng problema:- Upang patayong i-align ang text, mas mainam na gumamit ng mga vertical indent o ang line-height property.
- Para sa ganap na nakaposisyon na mga elemento na may alam na taas (halimbawa, mga icon), ang pamamaraan na may negatibong margin-top na property ay mainam.
- Para sa mas kumplikadong mga kaso, kapag hindi alam ang taas ng block, kailangan mong gumamit ng pseudo element o ang transform property.
- Kaya, kung ikaw ay napakaswerte na hindi mo kailangang suportahan ang mga mas lumang bersyon ng IE browser, kung gayon, siyempre, mas mahusay na gumamit ng Flexbox.
Mga Tag: Magdagdag ng mga tag
Gumagamit ang mga web designer ng mga DIV sa kanilang trabaho araw-araw. Nang walang anumang pagmamaliit, ito ang pinakasikat na tag. Buksan ang pinagmulan ng anumang website at makikita mo na karamihan, kung hindi man dalawang-katlo ng mga bagay ay nakapaloob
Ano ang DIV
Nagmula ang pangalan ng elemento salitang Ingles dibisyon, na nangangahulugang dibisyon. Kapag nagsusulat ng markup, ginagamit ito upang hatiin ang mga elemento sa mga bloke. Ang mga DIV ay naglalagay ng mga pangkat ng nilalaman sa isang web page. Halimbawa, mga larawan, mga talata na may teksto. Ang tag ay hindi nakakaapekto sa pagpapakita ng nilalaman sa anumang paraan at hindi nagdadala ng anumang semantic load.
Sinusuportahan ng DIV ang lahat ng mga global na katangian. Ngunit para sa disenyo ng web kailangan mo lamang ng dalawa - klase at id. Maaalala mo lamang ang tungkol sa iba sa mga kakaibang kaso, at hindi iyon katotohanan. Hindi na ginagamit ang attribute na align, na ginamit sa gitna o left align div.
Kailan gagamitin ang mga DIV
Isipin na ang site ay isang refrigerator at ang DIV ay mga lalagyang plastik, kung saan kailangan mong pag-uri-uriin ang mga nilalaman. Hindi ka maglalagay ng prutas sa parehong lalagyan na may liverwurst. Ilalagay mo nang hiwalay ang bawat uri ng produkto. Ang nilalaman ng web ay nabuo sa katulad na paraan.
Buksan ang anumang website at hatiin ito sa makabuluhang mga bloke. Header sa itaas, footer sa ibaba, pangunahing text sa gitna. Sa gilid ay karaniwang may mas maliit na column na may nilalaman ng advertising o tag cloud.
Ngayon tingnan ang bawat seksyon nang mas detalyado. Magsimula sa header. Ang header ng site ay may hiwalay na logo, nabigasyon, unang antas na heading, at kung minsan ay isang slogan. Italaga ang bawat semantic block ng sarili nitong lalagyan. Hindi lamang nito ihihiwalay ang mga elemento sa daloy, ngunit gagawin din itong mas madaling i-format. Mas madali mong isentro ang isang bagay sa isang DIV tag sa pamamagitan ng pagbibigay dito ng klase o ID.
Pagsentro sa mga DIV Gamit ang Mga Margin
Kapag nagpoproseso ng mga elemento ng web, isinasaalang-alang ng browser ang tatlong katangian: padding, marging at border. Ang padding ay ang puwang sa pagitan ng nilalaman at hangganan nito. Margin - mga patlang na naghihiwalay sa isang bagay mula sa isa pa. Ang hangganan ay ang mga linya sa kahabaan ng mga bloke. Maaari silang italaga sa lahat ng ito nang sabay-sabay o sa isang panig lamang:
div( border: 1px solid #333; border-left: none; )Ang mga katangiang ito ay nagdaragdag ng espasyo sa pagitan ng mga bagay at tinutulungan kang ihanay at ilagay ang mga ito nang maayos. Halimbawa, kung ang isang bloke na may larawan ay kailangang i-offset mula sa kaliwang gilid hanggang sa gitna ng 20%, magtatalaga ka ng margin-left value na 20% sa elemento:
Block-with-img( margin-left: 20%; )
Ang mga elemento ay maaari ding i-format gamit ang kanilang mga lapad na halaga at negatibong padding. Halimbawa, mayroong isang bloke na may mga sukat na 200px by 200px. Una, italaga natin ito ng isang ganap na posisyon at ilipat ito sa gitna ng 50%.
Div( posisyon: ganap; kaliwa: 50%; )
Ngayon, upang matiyak na ang nakasentro na DIV ay perpektong nakaposisyon, binibigyan namin ito ng negatibong margin sa kaliwa na katumbas ng 50% ng lapad nito, iyon ay -100 pixels:
Margin-kaliwa: -100px;
Sa CSS ito ay tinatawag na "air removal". Ngunit mayroon itong isang makabuluhang disbentaha sa pangangailangan na gumawa ng patuloy na mga kalkulasyon, na medyo mahirap gawin para sa mga elemento na may ilang mga antas ng nesting. Kung tinukoy ang mga halaga ng padding at border-width, bilang default ay kakalkulahin ng browser ang mga sukat ng lalagyan bilang kabuuan ng kapal ng mga hangganan, ang padding sa kanan at kaliwa, at ang nilalaman mismo sa loob, na maaaring dumating din bilang isang sorpresa.
Kaya kapag kailangan mong isentro ang isang DIV, gamitin ang box-sizing property na may value na border-box. Pipigilan nito ang browser na magdagdag ng padding at mga halaga ng hangganan sa kabuuang lapad ng elemento ng DIV. Upang itaas o babaan ang isang elemento, gumamit din ng mga negatibong halaga. Ngunit sa kasong ito, maaari silang italaga sa alinman sa itaas o ibabang field ng container.
Paano isentro ang isang DIV block gamit ang mga awtomatikong margin
Ito ay isang madaling paraan upang isentro ang malalaking bloke. Itatalaga mo lang ang lapad ng container at ang margin property sa auto. Ang browser ay maglalagay ng isang bloke sa gitna na may pantay na mga margin sa kaliwa at kanan, na ginagawa ang lahat ng gawain mismo. Bilang resulta, hindi ka nanganganib na malito sa mga kalkulasyon sa matematika at makabuluhang makatipid sa iyong oras.
Gamitin ang paraan ng auto-field kapag bumubuo ng mga tumutugong app. Ang pangunahing bagay ay magtalaga ng isang lapad na halaga sa lalagyan sa em o porsyento. Ang halimbawang code sa itaas ay isentro ang DIV sa anumang device, kabilang ang mga mobile phone, sasakupin nito ang 90% ng screen.
Alignment sa pamamagitan ng display property: inline-block
Bilang default, ang mga elemento ng DIV ay itinuturing na mga elemento ng block, at ang kanilang display value ay block. Para sa paraang ito kakailanganin mong i-override ang property na ito. Angkop lamang para sa mga DIV na may lalagyan ng magulang:
Ang isang elemento na may outer-div class ay nakatalaga ng isang text-align na property na may value ng center, na nakasentro sa text sa loob. Ngunit sa ngayon ay nakikita ng browser ang nested DIV bilang isang block object. Para gumana ang text-align property, ang inner-div ay dapat ituring bilang lowercase. Kaya sa talahanayan ng CSS para sa inner-div selector isusulat mo ang sumusunod na code:
Inner-div( display: inline-block; )
Binago mo ang display property mula block patungo sa inline-block.
paraan ng pagbabago/pagsasalin
Ginagawang posible ng mga cascading style sheet na ilipat, i-skew, paikutin, at kung hindi man ay ibahin ang anyo ng mga elemento ng web sa kalooban. Ginagamit ang transform property para dito. Ang mga halaga ay nagpapahiwatig ng nais na uri at antas ng pagbabago. SA sa halimbawang ito makikipagtulungan kami sa pagsasalin:
ibahin ang anyo: isalin(50%, 50%);Ang translate function ay naglilipat ng elemento mula sa kasalukuyang posisyon nito pakaliwa/kanan at pataas/pababa. Dalawang halaga ang ipinasa sa mga bracket:
- antas ng pahalang na paggalaw;
- antas ng patayong paggalaw.
Kung ang isang elemento ay kailangang ilipat sa isa lamang sa mga coordinate axes, pagkatapos pagkatapos ng salitang isalin ay ipinapahiwatig mo ang pangalan ng axis at sa mga panaklong ang halaga ng kinakailangang pag-aalis:
Ibahin ang anyo: isalinY(-20%);
Sa ilang mga manual, mahahanap mo ang transform na may mga prefix ng vendor:
Webkit-transform: isalin(50%, 50%); -ms-transform: isalin(50%, 50%); ibahin ang anyo: isalin(50%, 50%);
Sa 2018, hindi na ito kinakailangan; ang property ay sinusuportahan ng lahat ng browser, kabilang ang Edge at IE.
Upang maisentro ang DIV na gusto namin, ang CSS translate function ay nakasulat na may halagang 50% para sa vertical at horizontal axis. Magiging sanhi ito ng browser na i-offset ang elemento mula sa kasalukuyang posisyon nito sa kalahati ng lapad at taas nito. Dapat tukuyin ang mga katangian ng lapad at taas:
Tandaan na ang elemento kung saan inilapat ang transform property ay gumagalaw nang hiwalay sa mga bagay na nakapalibot dito. Sa isang banda, ito ay maginhawa, ngunit kung minsan kapag inilipat, ang DIV ay maaaring mag-overlap sa isa pang lalagyan. Samakatuwid, ang pamamaraang ito ng pagsentro ng mga bahagi ng web ay itinuturing na hindi karaniwan at ginagamit lamang sa mga kaso ng matinding pangangailangan. Ang mga pagbabagong-anyo ayon sa lahat ng mga canon ng CSS ay ginagamit para sa animation.
Paggawa gamit ang layout ng Flexbox
Isinasaalang-alang ang Flexbox sa isang komplikadong paraan mga layout ng web. Ngunit kung master mo ito, mauunawaan mo na ito ay mas simple at mas kasiya-siya kaysa karaniwang mga paraan pag-format. Flexbox Specification ay Flexible at hindi kapani-paniwala makapangyarihang paraan pagproseso ng elemento. SA wikang Ingles Ang pangalan ng module ay isinalin bilang "flexible na lalagyan". Ang mga halaga ng lapad, taas, at pag-aayos ng mga elemento ay awtomatikong inaayos, nang hindi kinakalkula ang mga indent at margin.
Sa mga nakaraang halimbawa, nagtrabaho na kami sa display property, ngunit itinakda namin ito sa block at inline-block na mga halaga. Upang lumikha ng mga flex na layout gagamitin namin ang display: flex. Una kailangan namin ng isang flex container:
Upang i-convert ito sa isang flex container sa mga cascading table, isinusulat namin ang:
Flex-container (display: flex; )
Ang lahat ng mga nested na bagay, ngunit ang mga direktang inapo lamang, ay magiging mga flex na elemento:
Kung maglalagay ka ng listahan sa loob ng isang flex na lalagyan, kung gayon ang mga li list na item ay hindi itinuturing na mga elemento ng flex. Ang layout ng Flexbox ay gagana lamang sa ul:
Mga panuntunan para sa paglalagay ng mga elemento ng flex
Para pamahalaan ang mga flex na item, kailangan mo ng justify-content at align-item. Depende sa tinukoy na mga halaga, ang dalawang property na ito ay awtomatikong naglalagay ng mga bagay kung kinakailangan. Kung kailangan nating isentro ang lahat ng mga nested DIV, isusulat natin ang justify-content: center, align-item: center at wala nang iba pa. Gagawin ng browser ang natitirang bahagi ng gawain mismo:
Upang isentro ang text sa mga DIV na mga flex item, maaari mong gamitin ang karaniwang pamamaraan ng text-align. O maaari mong gawing flex container din ang bawat nested DIV at pamahalaan ang content gamit ang justify-content. Ang pamamaraang ito ay higit na makatwiran kung naglalaman ito ng iba't ibang nilalaman, kabilang ang mga graphics, iba pang mga nested na bagay, kabilang ang mga multi-level na listahan.
Hello! Patuloy naming pinagkadalubhasaan ang mga pangunahing kaalaman ng wikang HTML. Tingnan natin kung ano ang kailangan mong isulat upang ihanay ang teksto sa gitna, lapad o mga gilid.
Pagbaba sa negosyo, tingnan natin kung paano isentro ang text sa tatlo sa iba't ibang paraan. Ang huling dalawa ay direktang naka-link sa style sheet. Maaari itong maging isang CSS file na kumokonekta sa mga pahina ng site at tumutukoy sa kanilang hitsura.
Paraan 1 - direktang trabaho sa HTML
Ito ay talagang medyo simple. Tingnan ang halimbawa sa ibaba.
Ihanay ang talata sa gitna.
Kung kailangan mong ilipat ang mga fragment ng teksto sa ibang paraan, sa halip na ang parameter na "gitna", ilagay ang mga sumusunod na halaga:
- bigyang-katwiran - ihanay ang teksto sa lapad ng pahina;
- kanan – sa kanang gilid;
- kaliwa - sa kaliwa.
Sa pamamagitan ng pagkakatulad, maaari mong ilipat ang nilalaman na nasa mga header (h1, h2) at lalagyan (div).
Paraan 2 at 3 - gamit ang mga istilo
Ang disenyo na ipinakita sa itaas ay maaaring bahagyang mabago. Magiging pareho ang epekto. Upang gawin ito, kailangan mong isulat ang code sa ibaba.
Text block.
Sa form na ito, ang code ay direktang nakasulat sa HTML upang isentro ang nilalaman ng teksto.
May isa pang alternatibong paraan upang makamit ang mga resulta. Kakailanganin mong gumawa ng ilang hakbang.
Hakbang 1. Sa pangunahing code isulat
Text material.
Hakbang 2. Sa kasamang CSS file, ilagay ang sumusunod na code:
Rovno (text-align:center;)
Pansinin ko na ang salitang "rovno" ay pangalan lamang ng isang klase na maaaring tawaging iba. Ito ay naiwan sa pagpapasya ng programmer.
Sa pamamagitan ng pagkakatulad, sa HTML maaari mong madaling gawing nakasentro ang teksto, nabibigyang katwiran, at nakahanay sa kanan o kaliwang gilid ng pahina. Tulad ng nakikita mo, mayroong higit sa isang pagpipilian upang makamit ang iyong layunin.
Ilang katanungan lamang:
- Gumagawa ka ba ng isang information non-profit na proyekto?
- Gusto mo bang maging maganda ang ranggo ng iyong website sa mga search engine?
- Gusto mo bang kumita online?
Kung ang lahat ng mga sagot ay positibo, pagkatapos ay tumingin lamang sa isang pinagsamang diskarte sa pagbuo ng website. Lalo na magiging kapaki-pakinabang ang impormasyon kung tatakbo ito sa WordPress CMS.
Gusto kong ituro na ang iyong sariling mga website ay isa lamang sa maraming mga opsyon para sa pagbuo ng passive o aktibong kita sa Internet. Ang aking blog ay nakatuon sa mga pagkakataong pinansyal online.
Nakapagtrabaho ka na ba sa larangan ng traffic arbitrage, copywriting at iba pang mga lugar ng aktibidad na nagdadala ng pangunahing o karagdagang kita sa panahon ng malayuang pakikipagtulungan? Maaari mong malaman ang tungkol dito at marami pang iba ngayon sa mga pahina ng aking blog.
Magpapa-publish pa ako ng marami sa hinaharap kapaki-pakinabang na impormasyon. Manatiling konektado. Kung nais mo, maaari kang mag-subscribe sa mga update ng Workip sa pamamagitan ng e-mail. Ang subscription form ay matatagpuan sa ibaba.