Alinhamento do centro: layout CSS

Quando o layout da página é geralmente necessário paraalinhamento do centro de uma maneira CSS: por exemplo, centralizar o bloco principal. Existem várias opções para resolver este problema, cada uma das quais, mais cedo ou mais tarde, deve ser usada por qualquer tipógrafo.

Alinhar texto ao centro

Muitas vezes, para fins decorativos, você precisa perguntaralinhamento de texto no centro, CSS, neste caso, pode reduzir o tempo de layout. Anteriormente, isso era feito usando atributos HTML, mas agora o padrão exige que o texto seja alinhado usando folhas de estilo. Ao contrário dos blocos para os quais você precisa alterar as margens externas, no alinhamento de texto CSS no centro é realizado usando uma única linha:

• texto-alinhar: centro;

Esta propriedade é herdada e passada do pai.para todos os descendentes. Afeta não só o texto, mas também outros elementos. Para fazer isso, eles devem estar em minúsculas (por exemplo, span) ou minúsculas (qualquer bloco que tenha o display: conjunto de propriedades de bloco). A última opção também permite que você altere a largura e a altura do elemento, ajustando de forma mais flexível o recuo.

Frequentemente, o alinhamento de páginas é atribuído à própria tag. Isso imediatamente torna o código inválido porque o W3C tornou o atributo align obsoleto. Usá-lo em uma página não é recomendado.

Alinhamento do bloco central

Se você precisa definir o alinhamento do div no centro, CSSpode oferecer uma maneira bastante conveniente: usando recuos de margem externa. A indentação pode ser definida para elementos de bloco e bloco de linha. O valor da propriedade deve ter os valores 0 (recuo vertical) e automático (recuo horizontal automático):

• margem: 0 auto;

Agora exatamente esta opção é absolutamente reconhecidaválido. O uso de recuo também permite definir o alinhamento da imagem no centro: a propriedade de margem CSS permite resolver muitos problemas associados ao posicionamento de um elemento na página.

Alinhamento de bloco esquerdo ou direito

Às vezes, o alinhamento do centro de uma maneira CSS não énecessário, mas você precisa colocar dois blocos lado a lado: um da borda esquerda, o outro da direita. Para fazer isso, existe uma propriedade flutuante que pode ter um dos três valores: esquerdo, direito ou nenhum. Suponha que você tenha dois blocos que precisam ser colocados lado a lado. Então o código será assim:

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

Se também houver um terceiro bloco, que deve estar localizado nos dois primeiros blocos (por exemplo, rodapé), será necessário registrar a propriedade clear:

• .left {float: left;}
• .right {float: right}
• rodapé {claro: ambos}

O fato é que blocos com classes esquerda e direitacair fora do fluxo geral, isto é, todos os outros elementos ignoram a própria existência de elementos alinhados. A clara: ambas as propriedades permitem que o rodapé ou qualquer outro bloco veja elementos que caíram do fluxo e proíbe a flutuação tanto à esquerda quanto à direita. Portanto, no nosso exemplo, o rodapé será desativado.

Alinhamento vertical

Há momentos em que não basta perguntaralinhamento do centro em formas CSS, você ainda precisa alterar a posição vertical do bloco filho. Qualquer elemento inline ou inline-block pode ser pressionado na borda superior ou inferior, localizado no meio do elemento pai ou em qualquer lugar. Na maioria das vezes, o alinhamento do bloco no centro é necessário, para isso, o atributo de alinhamento vertical é usado. Suponha que haja dois blocos, um aninhado no outro. Nesse caso, o bloco interno é um elemento de bloco de linhas (display: inline-block). É necessário alinhar o bloco filho verticalmente:

• alinhamento superior - .child {vertical-align: top};
• alinhamento do centro - .child {vertical-align: middle};
• alinhamento inferior - .child {vertical-align: bottom};

Nem o alinhamento de texto nem o alinhamento vertical afetam os elementos de bloco.

Possíveis problemas com blocos alinhados

Às vezes, centrando uma div em um modo CSSpode causar problemas menores. Por exemplo, ao usar float: digamos que existam três blocos: .first, .second e .third. O segundo e terceiro blocos estão no primeiro. Um elemento com a segunda classe é alinhado à esquerda e o último bloco é alinhado à direita. Depois de nivelar, ambos caíram fora do fluxo. Se o elemento pai não tiver uma altura (por exemplo, 30em), ele interromperá o alongamento ao longo da altura dos blocos secundários. Para evitar esse erro, use um “espaçador” - um bloco especial que vê .segundo e terceiro. Código CSS:

• .second {float: left}
• terceiro {float: right}
• .clearfix {altura: 0; claro: ambos;}

Pseudo-classe freqüentemente usada:after, que também permite que você retorne os blocos para o local criando um pseudo-splitter (no exemplo da div com o container da classe, ele fica dentro de .first e contém .left e .right):

• .left {float: left}
• .right {float: right}
• .container: após {content: ""; display: mesa; claro: ambos;}

As opções acima são as mais comuns, embora existam várias variações. Você sempre pode encontrar a maneira mais fácil e conveniente de criar pseudo-amostras por experimentação.

Outro problema frequentemente encontradotipógrafos, - alinhamento dos elementos do bloco de linhas. Depois de cada um deles, um espaço é automaticamente adicionado. A propriedade de margem, definida como um recuo negativo, ajuda a lidar com isso. Existem outras maneiras que são usadas com menos frequência: por exemplo, redefinir o tamanho da fonte. Nesse caso, tamanho da fonte: 0 é especificado nas propriedades do elemento pai. Se o texto estiver localizado dentro dos blocos, o tamanho de fonte desejado já será retornado nas propriedades dos elementos de bloco inline. Por exemplo, tamanho da fonte: 1em. O método nem sempre é conveniente, portanto, a opção com recuo é muito mais usada.

O alinhamento de blocos permite criar páginas bonitas e funcionais: esse é o layout do layout geral, a localização de mercadorias em lojas on-line e as fotografias em um site de cartão de visita.