Centrado: CSS-disposición

Cando o deseño da páxina é moitas veces necesario para facer un CSS-way centrado: por exemplo, para centralizar a unidade principal. Existen varias solucións a este problema, cada un dos cales, máis tarde ou máis cedo terá que utilizar calquera codificación.

Aliñar texto ao centro

Moitas veces, para fins decorativos que pretende definir o texto centrado, CSS, neste caso, para reducir o tempo de imposición. Anteriormente isto era feito empregando HTML-atributos, pero agora o estándar esixido para aliñar o texto coa folla de estilo. En contraste co bloque ao que quere cambiar o recheo externo en liña CSS do texto no medio faise cunha soa liña:

• text-align: center;

Esta propiedade é herdada e pasada de pais a todos os nenos. Ela afecta non só o texto, pero tamén a outros elementos. Para iso, eles deben estar en minúsculas (por exemplo, extensión), ou liña-bloque (todos os bloques que especifican propiedade display: block). A última opción tamén permite que cambie o ancho e alto do elemento, configuración máis flexible recuar.

páxinas frecuentemente aliñar atributo para si a etiqueta. Isto inmediatamente fai que o código non é válido, xa W3C recoñeceu atributo align obsoleto. Usalo nunha páxina non é recomendada.

bloque centrado

Se desexa definir o aliñamento do div no medio, CSS pode ofrecer un xeito moi cómodo: a utilización da marxe de recheo externo. O recheo pode ser indicado como os elementos de bloque, e liña-bloque. valor Svoysva debe ser 0 (recheo vertical) e Auto (recuar automático horizontal):

• Margin: 0 auto;

Agora, esta opción é recoñecido como absolutamente válido. Mediante o recheo externo tamén permite que estableza o aliñamento do centro: propiedade CSS marxe nos permite resolver moitos problemas asociados co elemento de posicionamento na páxina.

Aliñación do borde esquerda ou dereita do bloque

Ás veces CSS-way non require aliñamento do centro, pero é necesario poñer os próximos dous bloques, un á esquerda e outra - da dereita. Para iso, hai a propiedade float, o que pode levar un dos tres valores: esquerda, dereita ou ningún. Imos dicir que ten dous bloques que deben ser colocados de xeito conxunto. A continuación, o código é:

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

Se hai un terceiro bloque, o cal debe ser situado baixo os primeiros dous bloques (por exemplo, ao pé de páxina), entón é necesario para rexistrar característica claro:

• .Left {float: left;}
• .right {float: right}
• pé {clear: both}

O feito de que os bloques coas clases de esquerda e dereita caer do fluxo total, é dicir, todos os outros elementos ignorou a propia existencia de elementos aliñados. Propiedade Clear: both permite bloque de rodapé ou calquera outra visible precipitado a partir das células de fluxo e prohibe envoltura (float) en ambos os dous lados esquerdo e dereito. Polo tanto, no noso exemplo, o pé é desprazado cara a abaixo.

aliñamento vertical

Hai casos en que non é suficiente para definir o aliñamento do centro da CSS-formas, tamén debe cambiar a posición vertical do bloque neno. Calquera liña ou liña-elemento de bloque pode ser presionada contra o bordo superior ou inferior, situado no medio do elemento pai ou estar nunha situación arbitraria. Na maioría das veces esixen o aliñamento do centro do bloque, que usa atributo vertical-align. Supoña que hai dous bloques, un aniñados dentro do outro. Nesta unidade interior - elemento de liña-bloque (Mostrar: inline-bloque). Cómpre aliñar o neno bloque vertical:

• aliñamento do límite superior - .child {vertical-align: arriba};
• centrado - .child {vertical-align: medio};
• aliñamento do borde inferior - {.child vertical-align: inferior};

No elementos de bloque de audio text-align, ou vertical-align non se aplica.

Posibles problemas con unidades aliñadas

Ás veces div align centro da CSS-way pode causar un pouco de dificultade. Por exemplo, cando se utiliza un flotador: por exemplo, hai tres bloques: .first, .segunda e .third. O segundo e terceiro bloques encóntranse na primeira. Un elemento cunha clase segundo aliñado á esquerda, eo último bloque - á dereita. Despois de aliñar os dous caeu de fluxo. Se o elemento pai non é definida altura (por exemplo, 30em), el deixará de alongar a altura de unidades subsidiarias. Para evitar este erro, usa o "espaçador" - unha unidade especial, que ve .segunda e .third. CSS-código:

• .segunda {float: left}
• .third {float: right}
• .clearfix {altura: 0; clear: both;}

pseudo frecuentemente utilizado: despois, o que tamén permite a devolver os bloques no lugar a través da creación de psevdorasporki (no exemplo, no div con clase encóntrase no interior do recipiente e comprende unha .left .first e .right):

• .Left {float: left}
• .right {float: right}
• .container: After {content: '' Mostrar: mesa; clear: both;}

As opcións anteriores - o máis común, aínda que algunhas variacións. Vostede poderá atopar a maneira máis fácil e máis cómodo para crear psevdorasporki por experimentos.

Outro problema frecuentemente atopado esquema - aliñamento de elementos de bloque de liña. Despois de cada un deles un espazo engádese automaticamente. Tratar con isto axuda a propiedade marxe, que é definido polo recuar negativo. Hai outras formas, que se usan con menos frecuencia, por exemplo, axustar o tamaño da fonte. Neste caso, as propiedades do elemento pai rexistra fonte de tamaño: 0. Situado dentro de bloques de texto, as propiedades dos elementos de bloque de liña volveron para o tamaño da fonte que desexe. Por exemplo, font-size: 1em. O método non sempre é conveniente, por iso, é moito máis comunmente versión utilizada con marxes externas.

Aliñados bloques permite crear páxinas fermosas e funcionais: o esquema xeral e deseño, ea localización das mercadorías en tendas, e fotos na páxina web dun pequeno.