Lo CSS si Awọn Ile-iṣẹ Agbegbe ati Ohun miiran HTML

element. Ọna ti o wọpọ julọ lati ṣe awọn ohun amorindun pẹlu CSS jẹ lati ṣeto awọn apa osi ati apa ọtun si idojukọ. Eyi ni CSS fun pipin ti o ni ijẹrisi kilasi ti "aarin" ti a lo si rẹ:

div.center {
ala: 0 auto;
iwọn: 80em;
}

CSS yii ni kiakia fun ohun-ini ti o sunmọ julọ yoo ṣeto awọn apa oke ati isalẹ si iye ti 0, nigba ti osi ati ọtun yoo lo "idojukọ." Eyi n gba aaye eyikeyi ti o wa ti o si pin pin o laileto laarin awọn ẹgbẹ mejeji ti window window wiwo, ni fifẹ ni fifun awọn oju-iwe lori oju-iwe naa.

Nibi o ti lo ninu awọn HTML:

Gbogbo gbolohun yii ni aarin,
ṣugbọn awọn ọrọ ti o wa ninu rẹ ti wa ni osi deedee.

Niwọn igbati apo rẹ ba ni iwọn ti a ṣe alaye rẹ, yoo wa laarin ara rẹ ninu awọn nkan ti o ni. Awọn ọrọ ti o wa ninu apo naa kii yoo ni idojukọ laarin rẹ, ṣugbọn yoo jẹ idalare. Eyi jẹ ọrọ ti o wa ni becaus ti a da ni idinaduro ni aiyipada ni aṣàwákiri wẹẹbù. Ti o ba fẹ pe ọrọ naa tun dara si, o le lo ohun-ọrọ-ọrọ ti a ṣaju tẹlẹ ni apapo pẹlu ọna yii lati ṣe ilọju pipin naa.

Ṣiṣẹ awọn aworan pẹlu CSS

Lakoko ti ọpọlọpọ awọn aṣàwákiri yoo han awọn aworan ti o da silẹ nipa lilo ohun elo kanna ti a ti ṣayẹwo tẹlẹ fun paragirafi, kii ṣe igbadun ti o dara lati gbekele ọna naa bi ko ṣe niyanju nipasẹ W3C . Niwon o ko ṣe iṣeduro, o ni anfani nigbagbogbo pe awọn ẹya-ara aṣàwákiri iwaju le yan lati kọ ọna yii.

Dipo lilo awọn ọrọ-kikọ si aaye kan, o yẹ ki o sọ fun ẹrọ lilọ kiri ayelujara pe aworan naa jẹ ifilelẹ kan-ipele. Ni ọna yii, o le ṣe aarin rẹ bi o ṣe le ṣii eyikeyi miiran. Eyi ni CSS lati ṣe eyi:

img.center {
àfihàn: dènà;
ala-osi: auto;
ala-ọtun: auto;
}

Ati ki o nibi ni HTML ti fun aworan ti a fẹ lati wa ni ile-iṣẹ:

O tun le ṣe awọn ohun kan nipa lilo CSS-ila-ara (wo isalẹ), ṣugbọn ọna yii ko ṣe atunṣe niwọnyi niwon o ṣe afikun awọn aza ojuṣe si aṣoju HTML rẹ. Ranti, a fẹ lati ya ara ati ọna, nitorina afikun awọn kaakiri CSS si koodu HTML rẹ pẹlu adehun ti iyatọ ati, bi iru bẹẹ, o yẹ ki o yee ni gbogbo igba ti o ṣee ṣe.

Paapaarọ awọn eroja ni otitọ pẹlu CSS

Awọn ohun ile-iṣẹ ni ihamọ nigbagbogbo ti ni irọra ni apẹẹrẹ ayelujara, ṣugbọn pẹlu ifasilẹ ti Ẹrọ Ìfilọlẹ Àpótí CSS ni CSS3, bayi ni ọna lati ṣe.

Iwọn titọ ni ṣiṣẹ bakannaa si titete petele ti a bo loke. Ohun elo CSS ni iṣiro-so pọ pẹlu iye arin.

.vcenter {
titẹ-igun: arin;
}

Iwọnyi si ọna yii ni pe ko gbogbo awọn aṣàwákiri ṣe atilẹyin CSS FlexBox, biotilejepe diẹ ati siwaju sii n wa ni ayika si ọna itọsọna CSS titun yi! Ni otitọ, gbogbo awọn aṣàwákiri òde òní loni n ṣe atilẹyin iṣẹ CSS yii. Eyi tumọ si pe awọn iṣoro rẹ nikan pẹlu Flexbox yoo jẹ ilọsiwaju lilọ kiri agbalagba.

Ti o ba ni awọn oran pẹlu awọn aṣàwákiri agbalagba, W3C ṣe iṣeduro pe ki o tẹ ọrọ ni ita gbangba ninu apo eiyan kan nipa lilo ọna wọnyi:

1. Gbe awọn eroja lati wa ni ile-inu kan ti o ni awọn ohun elo, bii pipin.
2. Ṣeto aaye to kere julọ lori ohun elo ti o ni.
3. Sọ pe ni ipindidi bi eriali tabili kan.
4. Ṣeto ipo-ọna itọnisọna si "arin."

Fun apẹẹrẹ, nibi ni CSS:

.vcenter {
min-iga: 12m;
àpapọ: cell-cell;
titẹ-igun: arin;
}

Ati ki o nibi ni HTML: