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:
- Tukma nga sentro
- Pag-sentro sa block-level nga elemento (sama sa usa ka dibisyon)
- Pagpili og usa ka imahe
- Vertically gisentro sa usa ka block o sa usa ka larawan
Daghang (daghang) mga tuig na ang milabay, ang mga tigdisenyo sa web mahimong mogamit sa elemento sa
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. p>
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
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:
apan ang teksto sa sulod niini nahabilin nga nahan-ay. div>
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:
- Ibutang ang mga elemento nga masentro sa sulod sa elemento, sama sa div.
- Paghimo og minimum nga gitas-on sa sulod nga elemento.
- Ipahayag nga adunay sulod nga elemento isip usa ka selula sa lamesa.
- 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. p>
div>
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.