Erdian: CSS-diseinua

Noiz orriaren diseinua askotan da beharrezkoa zentratua CSS-modu bat egiteko: adibidez, unitate nagusiak erdiratzeko. Arazo honen hainbat irtenbide horietako bakoitzak lehenago edo beranduago edozein Kodetzaile erabili daude.

Lerrokatu testua zentro

Askotan dekorazio helburuetarako zentratua testua, CSS kasu honetan ezartzeko, inposaketaren garai murriztu nahi izatea. Aurretik honek HTML-attributes erabili zen, baina orain estandarra estilo orriaren testua lerrokatzeko beharrezkoa. zein CSS erdian dago lerro bakar batekin egindako testua lerrokatzeko kanpoko betegarria aldatu nahi duzun blokea kontrastea:

• Testu-lerrokatzea: center;

Jabetza hori heredatu egiten da eta guraso pasatu haur guztientzat. ez bakarrik testua baina baita beste elementu to eragiten die. Horretarako, minuskulaz egon behar dute (adibidez, span) edo ilara-blokea (edozein bloke zehaztutako pantaila Jabetza: blokea). Azken aukera, halaber, zabalera eta elementu altuera, koska konfigurazioa malguagoak aldatzea uzten du.

orrietan lerrokatu askotan attribute bere buruari etiketa. Hau berehala egiten kodea baliogabea, W3C aitortu lerrokatu atributua zaharkituta geroztik. Erabiltzen orri batean ez da gomendagarria.

Erdian bloke

erdian div lerrokatzea ezarri nahi badituzu, CSS modu eroso nahiko eskaini ahal: kanpoko betegarria margin erabilera. Padding da bloke elementuak, eta lerro-bloke gisa zehaztu daiteke. Svoysva balioa 0 (padding bertikala), eta auto (koska automatikoak horizontalki) izan behar du:

• marjina: 0 auto;

Orain aukera hori erabat baliozko gisa aitortu. CSS-marjina jabetza ahalbidetzen kokatzea orriko elementu lotutako arazo asko konpondu behar digu: kanpoko padding erabiltzea ere erdian lerrokatzeko aukera ematen dizu.

ezkerreko edo eskuineko bloke ertzean lerrokatzea

Batzuetan CSS norabideko ez du erdian lerrokatzea behar, baina beharrezkoa da bi bloke ondoan, inork ezker aldetik eta bestea jarri - eskubidea batetik. Horretarako ez du karroza jabetza, eta horrek hiru balio bat hartu ahal izango da: Ezker, eskuin edo bat ere ez. Demagun bi bloke jarri behar aldamenean duzu. Ondoren kodea honako hau da:

• .left {float: ezkerra;}
• Eskubidea {float: eskuineko}

Han bada hirugarren bloke bat, lehen bi bloke (adibidez, footer) azpian kokatu behar da, eta ondoren, beharrezkoa da argi Ezaugarri erregistratzea:

• .left {float: ezkerra;}
• Eskubidea {float: eskuineko}
• footer {argi: bai}

Izan ere, ezker eta eskuin udazkenean guztira fluxuaren out of klaseak batera blokeak, hau da, beste elementu guztiak ikusi egiten zaie hori lerrokatzea elementuen existentzia bera. Jabetza argi: bai ahalbidetzen footer bloke edo beste edozein ikusgai fluxua zelula batetik hauspeatutako eta itzulbiratu (karroza), bai ezkerreko eta eskuineko debekatzen du. Beraz, gure adibidean, oinean beheranzko lekualdatu da.

lerrokatze bertikal

Badira kasuetan ez da nahikoa du CSS-bideak erdian lerrokatzea ezartzeko, ume blokearen posizio bertikala ere aldatu behar duzu. Edozein linea edo ilara-bloke elementu egon goiko edo beheko ertza kontra sakatzen daiteke, guraso elementu erdian kokatuta edo kokapena arbitrarioa izan. Gehienetan eskatzen bloke erdian lerrokatzea, bertikala-lerrokatzea attribute erabiltzen du. Demagun bi bloke, bata bestearen barruan habiaratuta daude. Ilara-bloke elementu (: inline-blokea pantaila) - indoor unitate honetan. Beharrezkoa da bertikal blokea ume lerrokatzeko:

• Goiko muga lerrokatzea - .child {bertikal-align: top};
• zentratua - .child {bertikal-align: erdiko};
• behean lerrokatzea - .child {bertikal-align: beheko};

Bloke elementu berean audio testu-lerrokatzea, edo bertikal-lerrokatzea ez da aplikatzen.

lerrokatu unitateak arazo posibleak

Batzuetan lerrokatu div CSS norabideko erdigunean arazoak apur bat eragin dezake. Adibidez, mugikor bat erabiltzean: .first, .second eta .third: adibidez, hiru bloke daude. Bigarren eta hirugarren blokeak Lehenengo etzan. class batekin elementu bat bigarren ezkerrean lerrokatu, eta azken blokea - eskuinean. lerrokatzeko ondoren bi erreka jaitsi. Guraso elementua ez da altuera definitzen badu (adibidez, 30em), filiala unitateak altuera luzatzen utziko du. error Hori gerta ez dadin, erabili "espacio" - Unitate berezi bat, ikusten .second eta .third. CSS-kodea:

• .second {flotatzen: ezker}
• .third {float: eskuineko}
• .clearfix {altuera: 0; Argi: bai;}

sasi askotan erabili: ondoren, ere bloke tokian itzultzeko psevdorasporki sortuz ahalbidetzen (klase batera div adibidez edukiontzi barruan dago eta .first .left eta Eskubidea osatzen dute):

• .left {float: ezker}
• Eskubidea {float: eskuineko}
• .container: {content ondoren: ''; display: mahai; Argi: bai;}

Goiko aukerak - ohikoena, nahiz eta aldaera batzuk daude. Beti aurkituko du psevdorasporki sortu nahi esperimentuak by modurik errazena eta erosoena.

Beste arazo bat maiz topatu diseinua - line blokeko elementuak lerrokatzea. Horietako bakoitzaren ondoren espazio bat automatikoki gehitzen da. Maneiatu marjina jabetza, hau da, koska negatiboa definitzen laguntzen du. Badira beste modu batzuk, eta horrek erabiltzen dira gutxiagotan, adibidez, berrezarri letra-tamaina. Kasu honetan, guraso elementu propietate erregistratzen font-size: 0. Testu bloke barruan kokatzen bada, line-bloke elementuen propietate dute, nahi den letra tamaina itzuli. Adibidez, letra-tamaina: 1em. Metodo hau ez da beti erosoa, beraz, askoz gehiago normalean erabiltzen da bertsioan kanpoko marjinak batera.

Bloke lerrokatzea ahalbidetzen orrietan eder eta funtzionala sortzeko aukera: diseinua orokorrak eta diseinua, eta ondasun kokalekua dendetan, eta argazki txiki baten gainean.