Centered: CSS-skipulag

Þegar skipulag á síðunni er oft nauðsynlegt að gera miðju CSS-vegur, td til að miðja helstu eining. Það eru nokkrar lausnir á þessu vandamáli, sem hver um sig mun fyrr eða síðar verða að nota hvaða coder.

Hliðra texta til miðju

Oft til skreytinga sem þú vilt stilla textann miðju, CSS í þessu tilfelli, til að draga úr þeim tíma sem álagningu. Áður var þetta gert með því að nota HTML-eiginleika, en nú staðall sem þarf að samræma texta með stíll lak. Öfugt við blokk sem þú vilt breyta ytra padding í CSS jöfnun texta í miðjunni er gert með einni línu:

• text-align: center;

Þessi eign er arfur og liðin frá foreldri til allra barna. Það hefur ekki aðeins áhrif á textann en einnig að öðrum þáttum. Í þessu skyni, ættu þeir að vera lágstafir (td span) eða röð-blokk (allir blokkir sem tilgreina sýna eign: blokk). Síðarnefndu valkostur gerir þér einnig kleyft að breyta breidd og hæð á frumefni, sveigjanlegri stillingu á inndrætti.

Síður samræma oft eiginleiki að sér merki. Þetta gerir strax fyrir ógildur, þar W3C viðurkenndi eigindi úreltur. Nota það á síðunni er ekki mælt með því.

centered blokk

Ef þú vilt setja jöfnun div í miðjunni, CSS getur boðið nokkuð þægilega leið: notkun utanaðkomandi padding framlegð. Padding getur verið skilgreindur sem blokk þætti, og línu-blokk. Svoysva gildi ætti að vera 0 (lóðrétt padding), og sjálfvirkt (sjálfvirk inndrátt lárétt):

• margin: 0 farartæki;

Nú er þessi valkostur er viðurkennt sem algerlega gild. Notkun ytri padding einnig er hægt að stilla jöfnun miðjunni: CSS-framlegð eign gerir okkur kleift að leysa mörg vandamál í tengslum við Positioning frumefni á síðunni.

Jöfnun vinstri eða hægri brún blokk

Stundum CSS leið þarf ekki jöfnun miðju, en það er nauðsynlegt til að setja næstu tvær blokkir, einn frá vinstri hlið og hitt - frá hægri. Fyrir þetta það er fljóta eign, sem getur tekið einn af þremur gildum: vinstri, hægri eða enginn. Við skulum segja að þú ert með tvær blokkir sem eiga að vera sett hlið við hlið. Þá er kóðinn sem hér segir:

• .left {fljóta: vinstri;}
• .right {fljóta: hægri}

Ef það er þriðja blokk, sem verður að vera staðsett undir fyrstu tvær blokkir (t.d. fót), þá er það nauðsynlegt að skrá sig skýra lögun:

• .left {fljóta: vinstri;}
• .right {fljóta: hægri}
• fótur {skýr: báðir}

Sú staðreynd að blokkir með þeim flokkum vinstri og hægri falla út af heildar flæði, það er, allir aðrir þættir hunsað tilvist þætti takt. Property skýr: báðir gerir fót blokk eða öðrum sýnilegar fellt úr flæði frumur og bannar hula (float) á bæði vinstri og hægri. Því í dæmi okkar, fótur er hreyfður niður.

lóðrétt stilling

Það eru tilvik þar sem ekki nóg að setja jöfnun miðju CSS-leiðir, verður þú einnig að breyta lóðrétta stöðu barnsins blokk. Hvaða lína eða róður-blokk þáttur má þrýsta á móti efri eða neðri brún, sem staðsett er í miðju foreldri frumefni eða vera í handahófskennda staðsetningu. Oftast þarf jöfnun miðju blokk, það notar lóðrétt-eigindi. Segjum sem svo að það eru tveir blokkir, einn hreiður í hinni. Í þessu innanhúss eining - f röð á blokk staka (skjánum: inline-blokk). Það er nauðsynlegt að samræma lóðrétt blokk barnið:

• jöfnun á efri mörk - .child {lóðrétt-align: Top};
• centered - .child {lóðrétt-align: miðja};
• jöfnun á neðri brún - .child {lóðrétt-align: botn};

Á þætti blokk hljóð text-align eða lóðrétt-align ekki við.

Möguleg vandamál með takt einingar

Stundum Div samræma miðju CSS-vegur getur valdið smá vandræðum. Til dæmis, þegar flotholti: til dæmis, það eru þrjár blokkir: .First, .second og .third. Annað og þriðja blokkir liggja í fyrstu. Þáttur með bekknum Annar vinstri-takt, og síðast blokk - á hægri. Eftir að aðlaga tveir lækkað úr straumnum. Ef foreldri þátturinn er ekki skilgreint hæð (td 30em), mun það hætta að teygja hæð eininga dótturfyrirtækjum. Til að koma í veg fyrir þessa villu, nota "sparra" - sérstakt eining, sem lítur .second og .third. CSS-kóða:

• .second {fljóta: vinstri}
• .third {fljóta: hægri}
• .clearfix {hæð: 0; skýr: báðir;}

gervi oft notuð: eftir, sem einnig gerir að skila blokkir á sinn stað með því að skapa psevdorasporki (í dæminu í div með bekknum liggur inni í ílátinu og samanstendur af .First .left og .right):

• .left {fljóta: vinstri}
• .right {fljóta: hægri}
• fláti: á eftir {innihald: ''; sýna: töflu; skýr: báðir;}

Ofangreind valkostir - algengasta, þótt nokkrar breytingar. Þú getur alltaf fundið auðveldasta og þægilegur vegur til að búa til psevdorasporki með tilraunum.

Annað vandamál oft upp skipulag - jöfnun þætti lína-blokk. Eftir að hver þeirra rými er sjálfkrafa bætt við. Meðhöndlið það hjálpar framlegð eign, sem er skilgreint með neikvæðum skerðing. Það eru aðrar leiðir, sem eru notuð sjaldnar, til dæmis, endurstilla leturstærð. Í þessu tilviki, eiginleikar foreldris frumefni skráir font-size: 0. Ef staðsett innan blokkir af texta, hafa eiginleikar þætti lína-blokk aftur að viðkomandi leturstærð. Til dæmis, font-size: 1em. Aðferðin er ekki alltaf þægilegt, svo það er miklu meira almennt notuð útgáfa með ytri brún.

Aðlaga Blokkir leyfir þér að búa til falleg og hagnýtur síður: almennt skipulag og skipulag, og staðsetning vöru í verslunum og myndir á síðuna af litlu.