Centrat: CSS-disseny

Quan el disseny de la pàgina és sovint necessari fer una CSS vies centrada: per exemple, per centrar la unitat principal. Hi ha diverses solucions a aquest problema, cadascuna de les quals tard o d'hora han d'utilitzar qualsevol codificador.

Alinear el text a centrar

Sovint amb fins decoratius que vol establir el text centrat, CSS, en aquest cas, per reduir el temps d'imposició. Anteriorment això es va fer fent servir HTML atributs, però ara l'estàndard requerit per alinear el text amb el full d'estil. En contrast amb el bloc per al qual voleu canviar l'espaiat extern en alineació CSS de text en el medi es fa amb una sola línia:

• text-align: center;

Aquesta propietat s'hereta i transmet de pares a tots els nens. Afecta no només el text, sinó també a altres elements. Amb aquesta finalitat, han de ser minúscules (per exemple, Span) o fila de blocs (tots els blocs que especifiquen la propietat display: block). L'última opció també permet canviar l'amplada i l'alçada de l'element, la configuració més flexible de la indentació.

pàgines sovint s'alineen a si mateix atribut de l'etiqueta. Això immediatament fa que el codi no vàlid, ja que va reconèixer W3C atribut align obsoleta. No es recomana usar-lo en una pàgina.

bloc centrada

Per establir l'alineació del div en el medi, CSS pot oferir una manera força còmode: l'ús de encoixinat marge extern. El farciment es pot especificar com els elements de bloc, i la línia-bloc. valor Svoysva ha de ser 0 (farcit vertical), i concessionaris (sagnia automàtica horitzontalment):

• margin: 0 auto;

Ara bé, aquesta opció es reconeix com absolutament vàlida. L'ús de farciment extern també li permet establir l'alineació del centre: propietat CSS marge ens permet resoldre molts problemes associats amb l'element de posicionament a la pàgina.

L'alineació de la vora esquerra o dret del bloc

De vegades CSS vies no requereix l'alineació del centre, però cal posar els pròxims dos blocs, un del costat esquerre i l'altre - des de la dreta. Per a això hi ha la propietat float, que pot prendre un de tres valors: esquerra, dreta o cap. Diguem que vostè té dos blocs que haurien d'anar al costat de l'altre. A continuació, el codi és el següent:

• .left {float: left;}
• .RIGHT {float: right}

Si hi ha un tercer bloc, que ha de ser situat sota dels dos primers blocs (per exemple, peu de pàgina), llavors cal registrar característica clara:

• .left {float: left;}
• .RIGHT {float: right}
• peu de pàgina {clear: both}

El fet que els blocs amb les classes de caiguda a l'esquerra i la dreta fora del flux total, és a dir, tots els altres elements ignoren l'existència mateixa d'elements alineats. Propietat clar: tant permet bloc de peu de pàgina o qualsevol altre visibles precipitada de les cèl·lules de flux i prohibeix l'embolcall (float) en ambdós costats esquerre i dret. Per tant, en el nostre exemple, el peu de pàgina es desplaça cap avall.

alineació vertical

Hi ha casos en què no és suficient per establir l'alineació del centre dels CSS-formes, també ha de canviar la posició vertical del bloc nen. Qualsevol element de línia o fila de bloc pot ser pressionat contra la vora superior o inferior, situat al mig de l'element pare o estar en una ubicació arbitrària. El més sovint requereixen l'alineació del centre del bloc, s'utilitza atribut vertical-align. Suposem que hi ha dos blocs, un niat dins de l'altre. En aquesta unitat interior - fila d'elements de bloc (display: inline-block). Cal alinear el bloc vertical de nen:

• alineació del límit superior - .child {vertical-align: top};
• centrada - .child {vertical-align: mitjana};
• alineació de la vora inferior - .child {vertical-align: part inferior};

En els elements de bloc d'àudio text-align, o vertical-align no s'aplica.

Els possibles problemes amb unitats alineades

De vegades div align centre de la CSS vies pot causar un petit problema. Per exemple, quan s'utilitza un flotador: per exemple, hi ha tres blocs: .First, .SECOND i .third. Els blocs segon i tercer es troben a la primera. Un element amb una classe de segon alineat a l'esquerra, i l'últim bloc - a la dreta. Després d'alinear els dos van caure del corrent. Si l'element pare no es defineix l'altura (per exemple, 30em), deixarà d'estirar l'altura de les unitats auxiliars. Per evitar aquest error, utilitzeu el "espaiador" - una unitat especial, que veu .SECOND i .third. CSS-codi:

• .SECOND {float: left}
• .third {float: right}
• .clearfix {alçada: 0; clear: both;}

pseudo s'utilitza sovint: després de, que també permet tornar els blocs en el seu lloc mitjançant la creació d'psevdorasporki (en l'exemple al div amb classe es troba a l'interior del recipient i comprèn una .left .First i .RIGHT):

• .left {float: left}
• .RIGHT {float: right}
• .container: after {content: ''; display: table; clear: both;}

Les opcions anteriors - el més comú, encara que hi ha algunes variacions. Sempre es pot trobar la manera més fàcil i més convenient per a crear psevdorasporki pels experiments.

Un altre problema que es troba amb freqüència el disseny - alineació dels elements de línia-bloc. Després de cada un d'ells s'afegeix automàticament un espai. Manejar ajuda a la propietat de marge, que es defineix per la sagnia negativa. Hi ha altres maneres, que s'utilitzen amb menys freqüència, per exemple, restableixi la mida de font. En aquest cas, les propietats de l'element pare registra font-size: 0. Si es troba dins dels blocs de text, les propietats dels elements de línia de bloc han tornat a la mida de font desitjat. Per exemple, la font de mida: 1 em. El mètode no sempre és convenient, per la qual cosa s'utilitza amb molta més freqüència versió amb marges externs.

L'alineació de blocs li permet crear pàgines belles i funcionals: el disseny general i el disseny i la ubicació dels productes a les botigues, i les fotos en el lloc d'un petit.