Paggamit sa CSS to Center Images ug uban pang mga HTML Objects

Mga imahen sa center, teksto, ug pag-block sa mga elemento sa pagtukod sa mga website

Kon nakakat-on ka unsaon pagtukod og mga website , usa sa labing komon nga mga lingaw nga kinahanglan nimo nga pag-master mao ang pag-focus sa mga butang sa window sa browser. Kini mahimong magpasabot sa pagsentro sa usa ka imahen sa panid, o mahimo kini nga sentro nga makatarunganon nga teksto sama sa mga headline isip kabahin sa disenyo.

Ang husto nga paagi sa pagtuman niining biswal nga pagtan-aw sa mga nakasentro nga mga hulagway o teksto o bisan ang imong tibuok nga webpage mao ang paggamit sa Cascading Style Sheets (CSS) . Kadaghanan sa mga kabtangan alang sa pagsentro nahimo sa CSS sukad ang bersyon 1.0, ug kini nagtrabaho nga maayo sa CSS3 ug moderno nga web browsers .

Sama sa daghang mga aspeto sa web design, adunay daghan nga mga paagi sa paggamit sa CSS sa mga elemento sa center sa usa ka web page. Atong tan-awon ang pipila ka lainlaing mga paagi sa paggamit sa CSS aron makab-ot kining biswal nga dagway.

Sa Kinatibuk-ang Paggamit sa CSS to Center Elements sa HTML

Ang pagsentro sa CSS mahimo nga usa ka hagit alang sa pagsugod sa mga tigdisenyo sa web tungod kay adunay daghang lainlaing mga paagi sa paghimo niining usa ka biswal nga estilo. Samtang ang nagkalainlaing pamaagi mahimong maayo o tinimplahan nga mga web developers nga nahibal-an nga dili tanang mga pamaagi ang naglihok sa matag elemento, kini mahimong lisud kaayo alang sa mas bag-ong mga propesyonal sa web tungod kay ang nagkalainlaing matang sa mga pamaagi nagpasabot nga kinahanglan nilang masayran kung kanus-a gamiton kung unsang pamaagi. Ang pinakamaayo nga butang nga buhaton mao ang pag-angkon og pagsabut sa pipila ka mga pamaagi. Samtang nagsugod ka sa paggamit niini, imong makat-unan kung unsang pamaagi ang labing maayo nga mga higayon.

Sa taas nga lebel, mahimo nimo gamiton ang CSS sa:

Daghang (daghang) mga tuig na ang milabay, ang mga tigdisenyo sa web mahimong mogamit sa elemento sa

sa mga imahen ug teksto, apan ang elemento sa HTML karon wala na usba ug wala na gisuportahan sa modernong mga web browser. Kini nagpasabot nga kinahanglan nimo likayan nga gamiton kining elemento sa HTML kung gusto nimo ang imong mga pahina nga ipakita sa hustong paagi ug mosunod sa modernong mga sumbanan! Ang rason nga kining elemento wala na, sa dakong bahin, tungod kay ang modernong mga website kinahanglan adunay tin-aw nga pagbulag sa istruktura ug estilo. Ang HTML gigamit aron sa paghimo sa estruktura samtang ang CSS nagdikta sa estilo. Tungod kay ang pagsentro mao ang usa ka makita nga kinaiya sa usa ka elemento (kon unsa ang hitsura niini kaysa unsa kini), kana nga estilo gidumala sa CSS, dili HTML. Mao kini ang hinungdan sa pagdugang sa usa ka
tag sa HTML nga estraktura dili sayop sumala sa modernong mga sumbanan sa web. Hinuon, kita mobalik sa CSS aron makuha ang atong mga elemento nga maayo ug nakasentro.

Pagsentro sa Teksto uban sa CSS

Ang labing sayon ​​nga butang nga nasentro sa usa ka webpage mao ang teksto. Adunay usa lamang ka estilo nga kabtangan nga kinahanglan nimong masayran aron buhaton kini: pag-align sa teksto. Himoa ang estilo sa CSS sa ubos, sama pananglit:

p.center {text-align: center; }

Uban niini nga linya sa CSS, ang matag parapo nga gisulat sa sentro nga klase gisentro nga pahulayan sulod sa elemento sa ginikanan niini. Pananglitan, kon ang parapo sulod sa usa ka dibisyon, nga nagpasabut nga kini usa ka anak sa maong dibisyon, kini nga gitutukan sa pahilit sulod sa

.

Ania ang usa ka pananglitan niini nga klase nga gigamit sa HTML nga dokumento:

Kini nga teksto gisentro.

Sa diha nga gisentro ang teksto uban sa teksto-ibutang ang kabtangan, hinumdumi nga kini nasentro sa sulod sa sulod niini nga elemento ug dili kinahanglan nga nakasentro sulod sa hingpit nga panid mismo. Hinumdomi usab nga ang sentro nga makatarunganon nga teksto mahimo nga malisud sa pagbasa alang sa dagkong mga hugpong sa sulod, busa gamita kini nga paagi. Ang mga headline ug gagmay nga mga bloke sa teksto, sama sa teksto sa usa ka artikulo o uban nga mga sulod, kasagaran sayon ​​nga basahon ug maayo kon nasentro, apan ang mas daghang mga hugpong sa teksto, sama sa bug-os nga artikulo mismo, malisud nga mag-ut-ut kon ang sulod puno sa gimatarong. Hinumdomi, ang pagbasa sa basahon kanunay nga yawe sa pag-abut sa website nga teksto!

Pagsentro sa mga Butang sa Kaundan sa CSS

Ang mga bloke mao ang bisan unsa nga mga elemento sa imong panid nga adunay tin-aw nga gilapdon ug gitukod ingon nga usa ka block-level nga elemento. Kasagaran, kini nga mga bloke gimugna pinaagi sa paggamit sa elemento sa HTML

. Ang labing komon nga paagi sa pagsentro sa mga bloke sa CSS mao ang paglain sa wala ug tuo nga mga gilay-on sa auto. Ania ang CSS alang sa dibisyon nga adunay usa ka hiyas sa klase nga "center" nga gigamit niini:

div.center {
kilid: 0 auto;
gilapdon: 80em;
}

Kining CSS nga kahulogan alang sa kabtangan sa gilay-on ang magtakda sa ibabaw ug ubos nga mga margin sa usa ka kantidad nga 0, samtang ang wala ug tuo mogamit sa "auto." Kini sa tinuud nagkinahanglan sa bisan unsang luna nga anaa ug gibahin kini parehas sa taliwala sa duha ka kilid sa window sa viewport, nga epektibo nga gisentro ang elemento sa panid.

Dinhi gipadapat kini sa HTML:

Kini nga bug-os nga bloke gisentro,
apan ang teksto sa sulod niini nahabilin nga nahan-ay.

Hangtud nga ang imong bloke adunay gibug-aton nga gilapdon, kini magsentro sa sulod sa sulod nga elemento. Ang teksto nga anaa sa maong bloke dili masentro sa sulod niini, apan mabiyaan-angayan. Kini tungod kay ang teksto nahibilin-nga gipasikaran sa default sa mga web browsers. Kon gusto nimo ang teksto nga nakasentro usab, mahimo nimo gamiton ang teksto-ibutang ang propiedad nga atong gitabonan sa sayo pa sa kini nga pamaagi sa pagsentro sa dibisyon.

Pagsentro sa mga Imahe nga adunay CSS

Samtang ang kadaghanan sa mga browsers magpakita sa mga hulagway nga nakasentro gamit ang sama nga teksto sa pag-align sa kabtangan nga atong gitan-aw alang sa parapo, kini dili maayong ideya nga mosalig niana nga paagi nga wala kini girekomenda sa W3C . Tungod kay wala kini girekomendar, kanunay adunay higayon nga ang mga umaabot nga mga bersyon sa mga browser mahimong mopili sa dili pagtagad niini nga pamaagi.

Sa baylo nga gamiton ang pag-align sa teksto aron sa pagsentro sa usa ka hulagway, kinahanglan nga ipahayag sa tago ang browser nga ang imahe usa ka block-level nga elemento. Niining paagiha, mahimo nimo kini isentro sama sa imong buhaton sa bisan unsang lain nga block. Ania ang CSS aron kini mahitabo:

img.center {
ipakita ang: block;
margin-left: auto;
kilid-tuo: auto;
}

Ug ania ang HTML nga alang sa hulagway nga gusto nato nga masentro:

Mahimo mo usab ipunting ang mga butang gamit ang in-line CSS (tan-awa ang sa ubos), apan kini nga pamaagi DILI girekomendar tungod kay kini nagdugang sa visual nga mga estilo sa imong HTML markup. Hinumdomi, gusto namong ibulag ang estilo ug istruktura, mao nga ang pagdugang sa mga estilo sa CSS sa imong HTML code uban ang pagbungkag sa panagbulag ug, sa ingon, kini kinahanglan nga likayan kutob sa mahimo.

Pagsentro sa Mga Sangkap nga Vertically sa CSS

Ang pagsentro sa mga butang sa tagsa-tagsa kanunay nga mahagit sa disenyo sa web, apan sa pagpagawas sa CSS Flexible Box Layout Module sa CSS3, aduna na kini usa ka paagi sa pagbuhat niini.

Ang vertikal nga paglinya susama sa horizontal alignment nga gisakup sa ibabaw. Ang CSS nga propyedad nga nagbarug-nahiuyon sa tunga nga bili.

.vcenter {
vertical-align: tunga-tunga;
}

Ang kalisud sa niini nga paagi mao nga dili tanang mga browser ang nagsuporta sa CSS FlexBox, bisan pa ug daghan pa ang nagkaduol niining bag-ong paagi sa layout sa CSS! Sa pagkatinuod, ang tanang modernong mga browser karon nagsuporta sa estilo sa CSS. Kini nagpasabot nga ang imong mga gikabalak-an sa Flexbox mao ang mas daan nga bersyon sa browser.

Kung adunay mga isyu sa mga daan nga mga browser, ang W3C nagsugyot nga isentro ang text vertikal sa sudlanan gamit ang mosunod nga pamaagi:

  1. Ibutang ang mga elemento nga masentro sa sulod sa elemento, sama sa div.
  2. Paghimo og minimum nga gitas-on sa sulod nga elemento.
  3. Ipahayag nga adunay sulod nga elemento isip usa ka selula sa lamesa.
  4. Ibutang ang vertikal nga paglinya sa "tunga-tunga."

Pananglitan, ania ang CSS:

.vcenter {
min-gitas-on: 12em;
ipakita: table-cell;
vertical-align: tunga-tunga;
}

Ug ania ang HTML:


Kining tekstoha vertically nakasentro sa kahon.

Vertical Centering ug Mas daan nga mga Bersyon sa Internet Explorer

Adunay pipila ka mga paagi sa pagpugos sa Internet Explorer (IE) sa pag-sentro ug unya gamiton ang conditional comments aron nga makita lamang sa IE ang mga estilo, apan kini usa ka gamay nga verbose ug hugaw. Ang maayong balita mao nga ang bag-o nga desisyon sa Microsoft sa pag-drop sa suporta alang sa mas karaan nga mga bersyon sa IE, kadtong dili suportang mga browser kinahanglan nga sa ilang mga paagi sa dili madugay, nga mas sayon ​​alang sa mga web designers nga mogamit sa modernong pamaagi nga pamaagi sama sa CSS FlexBox nga maghimo sa tanan nga CSS layout, dili lang pagsentro, mas sayon ​​alang sa tanang mga tigdesinyo sa web.