503 Shares 2672 views

Centrado: CSS-disposição

Quando o layout da página é muitas vezes necessário para fazer um CSS-way centrado: por exemplo, para centralizar a unidade principal. Existem várias soluções para este problema, cada um dos quais, mais cedo ou mais tarde terá de usar qualquer codificador.

Alinhar texto ao centro

Muitas vezes, para fins decorativos que pretende definir o texto centrado, CSS, neste caso, para reduzir o tempo de imposição. Anteriormente isto era feito usando HTML-atributos, mas agora o padrão exigido para alinhar o texto com a folha de estilo. Em contraste com o bloco para o qual você deseja alterar o preenchimento externo em alinhamento CSS do texto no meio é feita com uma única linha:

  • text-align: center;

Esta propriedade é herdada e passada de pai para todas as crianças. Ela afeta não só o texto, mas também a outros elementos. Para isso, eles devem estar em letras minúsculas (por exemplo, extensão) ou linha-bloco (todos os blocos que especificam propriedade display: block). A última opção também permite que você altere a largura e altura do elemento, configuração mais flexível do recuo.

páginas frequentemente alinhar atributo para si a tag. Isso imediatamente faz com que o código inválido, uma vez W3C reconheceu atributo align obsoleto. Usá-lo em uma página não é recomendada.

bloco centrado

Se você deseja definir o alinhamento do div no meio, CSS pode oferecer uma maneira bastante confortável: o uso da margem de preenchimento externo. O preenchimento pode ser especificado como os elementos de bloco, e linha-bloco. valor Svoysva deve ser 0 (preenchimento vertical) e Auto (recuo automático horizontal):

  • margin: 0 auto;

Agora, esta opção é reconhecido como absolutamente válido. Usando o preenchimento externo também permite que você defina o alinhamento do centro: propriedade CSS margem nos permite resolver muitos problemas associados com o elemento de posicionamento na página.

Alinhamento da borda esquerda ou direita do bloco

Às vezes CSS-way não requer alinhamento do centro, mas é necessário colocar os próximos dois blocos, um do lado esquerdo e outra – da direita. Para isso, há a propriedade float, o que pode levar um dos três valores: esquerda, direita ou nenhum. Vamos dizer que você tem dois blocos que devem ser colocados lado a lado. Em seguida, o código é a seguinte:

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

Se houver um terceiro bloco, o qual deve ser localizado sob os primeiros dois blocos (por exemplo, de rodapé), então é necessário para registar característica claro:

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

O fato de que os blocos com as classes de esquerda e direita cair do fluxo total, isto é, todos os outros elementos ignorou a própria existência de elementos alinhados. Propriedade clear: both permite bloco de rodapé ou qualquer outra visível precipitado a partir das células de fluxo e proíbe envoltório (float) em ambos os lados esquerdo e direito. Portanto, no nosso exemplo, o rodapé é deslocado para baixo.

alinhamento vertical

Há casos em que não é suficiente para definir o alinhamento do centro da CSS-maneiras, você também deve alterar a posição vertical do bloco criança. Qualquer linha ou linha-elemento de bloco pode ser pressionada contra a borda superior ou inferior, localizado no meio do elemento pai ou estar numa localização arbitrária. Na maioria das vezes exigem o alinhamento do centro do bloco, que utiliza atributo vertical-align. Suponha que existem dois blocos, um aninhados dentro do outro. Nesta unidade interior – elemento de linha-bloco (display: inline-bloco). É necessário alinhar a criança bloco vertical:

  • alinhamento do limite superior – .child {vertical-align: topo};
  • centrado – .child {vertical-align: meio};
  • alinhamento da borda inferior – {.child vertical-align: inferior};

No elementos de bloco de áudio text-align, ou vertical-align não se aplica.

Possíveis problemas com unidades alinhadas

Às vezes div align centro da CSS-way pode causar um pouco de dificuldade. Por exemplo, quando se utiliza um flutuador: por exemplo, existem três blocos: .first, .segunda e .third. O segundo e terceiro blocos encontram-se na primeira. Um elemento com uma classe segundo alinhado à esquerda, eo último bloco – à direita. Depois de alinhar os dois caiu de fluxo. Se o elemento pai não é definida altura (por exemplo, 30em), ele deixará de alongar a altura de unidades subsidiárias. Para evitar esse erro, use o "espaçador" – uma unidade especial, que vê .segunda e .third. CSS-código:

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

pseudo frequentemente utilizado: após, o que também permite a devolver os blocos no local através da criação de psevdorasporki (no exemplo, no div com classe encontra-se no interior do recipiente e compreende uma .left .first e .right):

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

As opções acima – o mais comum, embora haja algumas variações. Você pode sempre encontrar a maneira mais fácil e mais conveniente para criar psevdorasporki por experimentos.

Outro problema frequentemente encontrado layout – alinhamento de elementos de bloco de linha. Depois de cada um deles um espaço é adicionado automaticamente. Lidar com isso ajuda a propriedade margem, que é definido pelo recuo negativo. Há outras maneiras, que são usados com menos frequência, por exemplo, redefinir o tamanho da fonte. Neste caso, as propriedades do elemento pai regista fonte de tamanho: 0. Se localizado dentro de blocos de texto, as propriedades dos elementos de bloco de linha voltaram para o tamanho da fonte desejada. Por exemplo, font-size: 1em. O método nem sempre é conveniente, por isso, é muito mais comumente versão utilizada com margens externas.

Alinhando blocos permite criar páginas lindas e funcionais: o layout geral e layout, e a localização das mercadorias nas lojas, e fotos no site de um pequeno.