Mga imaheng sentro, teksto, at mga elementong bloke kapag nagtatayo ng mga website
Kung natututo ka kung paano bumuo ng mga website , ang isa sa mga pinaka-karaniwang mga trick na kakailanganin mong master ay kung paano i-sentro ang mga item sa window ng browser. Ito ay maaaring mangahulugan ng pagsasentro ng isang imahe sa pahina, o maaaring maging sentro-na nagpapahiwatig ng teksto tulad ng mga headline bilang bahagi ng disenyo.
Ang wastong paraan upang maisagawa ang visual na hitsura ng mga nakasentro na imahe o teksto o kahit na ang iyong buong webpage ay sa pamamagitan ng paggamit ng Cascading Style Sheets (CSS) . Karamihan sa mga katangian para sa pagsasentro ay nasa CSS mula noong bersyon 1.0, at gumagana ang mga ito nang mahusay sa CSS3 at modernong mga web browser .
Tulad ng maraming aspeto ng disenyo ng web, maraming mga paraan upang gamitin ang CSS sa mga elemento ng center sa isang web page. Tingnan natin ang ilang iba't ibang mga paraan upang magamit ang CSS upang makamit ang visual na hitsura.
Sa Pangkalahatang-ideya ng Paggamit ng CSS sa Mga Sangkap ng Center sa HTML
Ang pagsasentro sa CSS ay maaaring maging isang hamon para sa pagsisimula ng mga taga-disenyo ng web dahil maraming iba't-ibang paraan upang maisagawa ang isang estilo ng visual na ito. Habang ang iba't ibang mga pamamaraan ay maaaring maging maganda o napapanahong mga web developer na alam na hindi lahat ng mga diskarte ay gumagana sa bawat elemento, ito ay maaaring masyado mapaghamong para sa mas bagong mga propesyonal sa web dahil ang iba't ibang uri ng mga pamamaraan ay nangangahulugan na kailangan nilang malaman kung kailan gamitin kung aling paraan. Ang pinakamagandang bagay na dapat gawin ay ang pag-unawa sa ilang mga pamamaraan. Sa pagsisimula mong gamitin ang mga ito, matututunan mo kung aling paraan ang pinakamahusay na gumagana kung saan ang mga pagkakataon.
Sa isang mataas na antas, maaari mong gamitin ang CSS sa:
- Sentro ng sentro
- Center isang elemento ng antas ng block (tulad ng isang dibisyon)
- I-center ang isang imahe
- Patayo ang isang bloke o isang imahe
Maraming (maraming) taon na ang nakalilipas, maaaring gamitin ng mga taga-disenyo ng web ang elemento ng
Pagsentro ng Teksto na may CSS
Ang pinakamadaling bagay na nakapokus sa isang webpage ay ang teksto. Mayroon lamang isang estilo ng ari-arian na kailangan mong malaman upang magawa ito: i-align ang teksto. Kunin ang estilo ng CSS sa ibaba, halimbawa:
p.center {text-align: center; }
Sa linya ng CSS na ito, ang bawat talata na nakasulat sa sentro ng klase ay nakasentro sa pahalang sa loob ng elemento ng magulang nito. Halimbawa, kung ang talata ay nasa loob ng dibisyon, ibig sabihin ito ay isang bata ng dibisyong iyon, ito ay nakasentro nang pahalang sa loob ng
Narito ang isang halimbawa ng klase na inilapat sa dokumento ng HTML:
Ang tekstong ito ay nakasentro.
Kapag nakasentro ng text gamit ang text-align property, tandaan na ito ay nakasentro sa loob nito na naglalaman ng elemento at hindi kinakailangang nakasentro sa loob ng buong pahina mismo. Tandaan din na ang sentro-makatwirang teksto ay maaaring mahirap mabasa para sa mga malalaking bloke ng nilalaman, kaya gamitin ang ganitong estilo nang maaga. Ang mga pamagat at maliit na mga bloke ng teksto, tulad ng teksto ng teaser para sa isang artikulo o iba pang nilalaman, ay kadalasang madaling basahin at multa kapag nakasentro, ngunit ang mas malaking mga bloke ng teksto, tulad ng buong artikulo mismo, ay magiging mahirap na kainin kung ang nilalaman ay ganap na sentro makatwiran. Tandaan, ang pagiging madaling mabasa ay palaging susi pagdating sa teksto ng website!
Pagsentro sa Block ng Nilalaman sa CSS
Ang mga bloke ay anumang mga elemento sa iyong pahina na may tinukoy na lapad at itinatag bilang elemento ng block-level. Kadalasan, ang mga bloke na ito ay nilikha sa pamamagitan ng paggamit ng elemento ng HTML
div.center {
margin: 0 auto;
lapad: 80em;
}
Ang CSS shorthand para sa property ng margin ay itatakda ang mga top at bottom margin sa isang halaga ng 0, habang ang kaliwa at kanan ay gagamit ng "auto." Ito ay talagang tumatagal ng anumang puwang na magagamit at hatiin ito nang pantay-pantay sa pagitan ng dalawang panig ng window ng viewport, na epektibong nakasentro sa elemento sa pahina.
Narito ito ay inilalapat sa HTML:
ngunit ang teksto sa loob nito ay iniwang nakahanay.
Hangga't ang iyong bloke ay may isang tinukoy na lapad, ito ay sentro mismo sa loob ng naglalaman ng elemento. Ang teksto na nakapaloob sa bloke na iyon ay hindi nakasentro sa loob nito, ngunit maiiwan-makatwiran. Ito ay dahil ang teksto ay iniwan-na-ganap sa default sa mga web browser. Kung nais mo ang teksto na nakasentro pati na rin, maaari mong gamitin ang teksto-ihanay ang ari-arian na sakop namin mas maaga kasabay ng ganitong paraan upang i-sentro ang dibisyon.
Pagsentro ng Mga Larawan na may CSS
Habang ang karamihan sa mga browser ay magpapakita ng mga larawan na nakasentro gamit ang parehong teksto-align ari-arian na namin na tumingin para sa mga talata, ito ay hindi isang magandang ideya na umasa sa diskarteng ito na hindi ito inirerekomenda ng W3C . Dahil hindi ito inirerekomenda, palaging may pagkakataon na ang hinaharap na mga bersyon ng mga browser ay maaaring pumili upang huwag pansinin ang pamamaraang ito.
Sa halip ng paggamit ng teksto-align sa sentro ng isang imahe, dapat mong tahasang sabihin sa browser na ang imahe ay isang elemento ng block-level. Sa ganitong paraan, maaari mong i-sentro ito tulad ng gagawin mo sa iba pang bloke. Narito ang CSS upang gawin itong mangyari:
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
At narito ang HTML na para sa imaheng nais naming maging nakasentro:
Maaari mo ring puntahan ang mga bagay gamit ang in-line na CSS (tingnan sa ibaba), ngunit ang diskarte na ito ay HINDI inirerekomenda dahil nagdadagdag ito ng mga visual na estilo sa iyong HTML markup. Tandaan, gusto naming paghiwalayin ang estilo at istraktura, kaya nagdaragdag ng mga estilo ng CSS sa iyong HTML code na may break na paghihiwalay at, dahil dito, dapat itong iwasan hangga't maaari.
Pagsentro ng Mga Sangkap na Patayo sa CSS
Ang mga bagay na nakasentro sa patayo ay palaging mahirap sa disenyo ng web, ngunit sa pagpapalabas ng CSS Flexible Box Layout Module sa CSS3, mayroon na ngayong isang paraan upang gawin ito.
Ang vertical alignment ay gumagana nang katulad sa horizontal alignment na sakop sa itaas. Ang CSS property ay vertical-align sa gitnang halaga.
.vcenter {
vertical-align: gitna;
}
Ang downside sa diskarte na ito ay na hindi lahat ng mga browser ay sumusuporta sa CSS FlexBox, bagaman higit pa at higit pa ay darating sa paligid sa bagong CSS layout na pamamaraan! Sa katunayan, sinusuportahan ngayon ng lahat ng mga modernong browser ngayon ang estilo ng CSS na ito. Nangangahulugan ito na ang iyong mga alalahanin lamang sa Flexbox ay magiging mas lumang bersyon ng browser.
Kung mayroon kang mga isyu sa mas lumang mga browser, inirerekomenda ng W3C na patayo ang iyong teksto ng teksto sa isang lalagyan gamit ang sumusunod na paraan:
- Ilagay ang mga elemento na nakasentro sa loob ng isang elementong naglalaman, tulad ng isang div.
- Magtakda ng minimum na taas sa elemento na naglalaman.
- Ipahayag na naglalaman ng elemento bilang isang cell ng talahanayan.
- Itakda ang vertical alignment sa "gitna."
Halimbawa, dito ay ang CSS:
.vcenter {
min-taas: 12em;
display: table-cell;
vertical-align: gitna;
}
At narito ang HTML:
Ang tekstong ito ay patayo na nakasentro sa kahon.
Vertical Centering at Mas lumang Mga Bersyon ng Internet Explorer
Mayroong ilang mga paraan upang pilitin ang Internet Explorer (IE) sa gitna at pagkatapos ay gamitin ang mga kondisyon ng mga komento upang makita lamang ng IE ang mga estilo, ngunit ang mga ito ay isang bit masalita at pangit. Ang magandang balita ay ang kamakailang desisyon ng Microsoft na i-drop ang suporta para sa mga mas lumang bersyon ng IE, ang mga hindi sumusuporta sa mga browser ay dapat na sa kanilang paraan out sa lalong madaling panahon, na ginagawang mas madali para sa mga web designer na gumamit ng mga modernong pamamaraan ng layout tulad ng CSS FlexBox na gagawing lahat ng CSS layout, hindi lamang pagsasentro, mas madali para sa lahat ng mga web designer.