Centrigita: CSS-aranĝo

Kiam la aranĝon de la paĝo estas ofte necesaj por fari centrita CSS-maniero: ekzemple, centri la ĉefa unuo. Estas pluraj solvoj al tiu problemo, ĉiu el kiuj pli-malpli frue devos uzi iun ajn codificador.

Ĝisrandigi teksto centri

Ofte por ornamaj celoj vi deziras fiksi la tekston centrita, CSS en ĉi tiu kazo, por redukti la tempon de altrudo. Antaŭe tio estis farita uzante HTML-atributoj, sed nun la normo postulata por vicigi la tekston kun la stilo folio. Kontraste al la bloko por kiu vi volas ŝanĝi la eksteran Plenigado en CSS alineación de teksto en la mezo estas farita kun sola linio:

• teksto-align: center;

Tiu posedaĵo estas heredita kaj pasis de gepatroj al ĉiuj infanoj. Ĝi influas ne nur la tekston sed ankaŭ al aliaj elementoj. Por tiu celo, ili devas esti minuskla (ekz interspaco) aŭ vico-bloko (ajna blokoj kiuj specifi display propraĵo: bloko). Tiu lasta opcio ankaŭ permesas ŝanĝi la larĝeco kaj alteco de la elemento, pli fleksebla agordo de la deŝovon.

paĝoj ofte vicigas eco al si la etikedon. Ĉi tuj faras la kodo nevalida, ĉar W3C agnoskis align atributo malaktuala. Uzante ĝin sur paĝo estas malrekomendita.

Centrigita bloko

Se vi volas agordi la alineación de la div en la mezo, CSS povas proponi tre komforta maniero: la uzo de ekstera kompletigo rando. Plenigado povas esti precizigita kiel la bloko elementoj, kaj linio-bloko. Svoysva valoro devus esti 0 (vertikala kompletigo), kaj aŭtomate (aŭtomata deŝovon horizontale):

• rando: 0 auto;

Nun la opcio estas rekonita kiel absolute valida. Uzante ekstera kompletigo ankaŭ permesas agordi la alineación de la centro: CSS-rando posedaĵo permesas al ni por solvi multajn problemojn asociita kun la posicionamiento elemento en la paĝo.

Alineación de la maldekstra aŭ dekstra rando de la bloko

Kelkfoje CSS-maniero ne postulas alineamiento de la centro, sed estas necese meti la sekva du blokoj, unu el la maldekstra flanko kaj la alia - de dekstre. Pro tio ekzistas la kaleŝego proprieto, kiu povas preni unu el tri valoroj: maldekstra, dekstra aŭ neniu. Imagu ke vi havas du blokoj kiuj devus esti metitaj apud la alia. Tiam la kodo estas la jena:

• .left {float: lasis;}
• .right {kaleŝego: dekstra}

Se estas tria bloko, kiu devas esti lokita sub la unuaj du blokoj (ekz-e, piedlinio), tiam estas necese registri klara trajto:

• .left {float: lasis;}
• .right {kaleŝego: dekstra}
• piedlinio {klara: ambaŭ}

La fakto ke la blokoj kun la klasoj de maldekstre kaj dekstre falo el la tuta fluo, tio estas, ĉiuj aliaj elementoj ignoris la ekziston de elementoj vicigitaj. Proprieto klara: ambaŭ permesas piedlinio bloko aŭ iu ajn alia videbla precipitado de la fluo ĉeloj kaj ĝi malpermesas wrap (float) sur ambaŭ la maldekstra kaj dekstra. Tial, en nia ekzemplo, la piedlinio estas delokita suben.

vertikala alineación

Ekzistas kazoj kie ne sufiĉas por fiksi la alineación de la centro de la CSS-manieroj, vi devas ankaŭ ŝanĝi la vertikala pozicio de la infano bloko. Ajna linio aŭ vico-bloko elemento povas esti premitaj al la supra aŭ suba rando, situas en la mezo de la patro elemento aŭ esti en arbitran lokon. Plej ofte postulas alineamiento de la centro de la bloko, ĝi uzas vertikala-align atributo. Supozu ke estas du blokoj, unu nestitaj ene de la alia. En ĉi endomaj unuo - vico-bloko elemento (display: inline-bloko). Estas necese vicigi la vertikala bloko junulo;

• alineación de la supra limo - .child {vertikala-align: top};
• centrita - .child {vertikala-align: meza};
• alineación de la malsupra rando - .child {vertikala-align: fundo};

Ĉe bloko elementoj audio teksto-align aŭ vertikala-align ne aplikeblas.

Eblaj problemoj kun vicigitaj unuoj

Kelkfoje div align la centro de la CSS-vojo povas kaŭzi iom problemojn. Ekzemple, kiam oni uzas kaleŝego: ekzemple, estas tri blokoj: .first, .second kaj .third. La dua kaj tria blokoj kuŝas en la komenco. Ero kun klason dua forlasis-vicigitaj, kaj la lasta bloko - dekstre. Post vicigante la du falis de la fluo. Se la patro elemento estas ne difinita alto (ekz, 30em), ĝi ĉesos tiri la altecon de filio unuoj. Por eviti tiun eraron, uzu la "spacer" - speciala unuo, kiu vidas .second kaj .third. CSS-kodo:

• .second {flosi: maldekstra}
• .third {kaleŝego: dekstra}
• .clearfix {alteco: 0; klara: ambaŭ;}

pseŭdo ofte uzata: post, kiu krome permesas redoni la blokojn en loko de krei psevdorasporki (en la ekzemplo de la div kun klaso kuŝas ene de la ujo kaj konsistas el .first .left kaj .right):

• .left {kaleŝego: maldekstra}
• .right {kaleŝego: dekstra}
• .container: post {enhavo: ''; display: tablo; klara: ambaŭ;}

La supre opcioj - la plej ofta, kvankam ekzistas iuj variadoj. Vi povas ĉiam trovi la plej facila kaj plej oportuna maniero por krei psevdorasporki per eksperimentoj.

Alia problemo ofte renkontis aranĝo - alineación de linio-bloko elementoj. Post ĉiu el ili spaco estas aldonita aŭtomate. Kromnomo helpas la rando proprieto, kiu estas difinita de la negativa deŝovon. Estas aliaj vojoj, kiuj estas uzataj malpli ofte, ekzemple, reagordi la tiparon grandeco. En ĉi tiu kazo, la bienoj de la patro elemento registras tiparo-grandeco: 0. Se lokita ene blokoj de teksto, la propraĵoj de linio-bloko elementoj revenis al la dezirata tiparo. Ekzemple, tiparo-grandeco: 1em. La metodo ne ĉiam oportuna, do ĝi estas multe pli ofte uzata versio kun eksteraj randoj.

Vicigante Blokoj permesas krei belan kaj funkcia paĝoj: la ĝenerala aranĝo kaj aranĝo, kaj la lokon de varoj en la butikoj, kaj fotoj en la retejo de malgranda.