ajuste na página é muitas vezes necessário fazer o alinhamento centro CSS vias: por exemplo, para centralizar a unidade principal.Existem várias soluções para este problema, cada um dos quais, mais cedo ou mais tarde têm de usar qualquer codificador.
Alinhar texto centrado
muitas vezes para fins decorativos que pretende definir o alinhamento do texto do centro, CSS, neste caso, reduz o tempo de imposição.Anteriormente, isso foi feito usando HTML-atributos, agora padrão requer texto alinhar usando folhas de estilo.Em contraste com o bloco para o qual você deseja alterar as margens exteriores, com alinhamento de texto CSS no meio é feito com uma única linha:
- text-align: center;
Esta propriedade é herdada e passada de pai para todas as crianças.Ela afeta não apenas o texto, mas também a outros elementos.Para fazer isso, eles devem ser em letras minúsculas (por exemplo, span) ou line-bloco (todos os blocos que define a exibição da propriedade: bloco).A última opção também permite que você mude a largura ea altura de configuração mais flexível do recuo.
Muitas vezes as páginas alinhar atributo para a marca em si.Isto imediatamente torna o código inválido como W3C reconheceu atributo align obsoleto.Seu uso não é recomendado na página.
bloco de alinhamento no centro
Se você deseja especificar o alinhamento do centro da div, CSS pode oferecer uma maneira bastante fácil: o uso de margem de recuo externo.O preenchimento pode ser definido como um elementos em nível de bloco e linha-bloco.Svoysva valor deve ser definido para 0 (recuado vertical) e automático (travessões horizontais automáticos):
- margin: 0 auto;
Agora, esta opção é reconhecido como absolutamente válido.Usando preenchimento externo também permite que você especifique o alinhamento do centro: propriedade CSS-margem nos permite resolver muitos problemas associados com o elemento de posicionamento na página.
Align bloco na borda esquerda ou direita
Às vezes, o alinhamento central CSS-way não é obrigatório, mas é necessário colocar duas unidades ao lado um do lado esquerdo e outro - da direita.Para esta propriedade há um float, o que pode demorar um dos três valores: esquerda, direita, ou nenhum.Vamos dizer que você tem duas unidades que precisam ser colocados juntos.Em seguida, o código será:
- .Left {float: left;}
- .right {float: right}
Se houver uma terceira unidade, que deve ser colocado sob os dois primeiros blocos (por exemplo, o rodapé), elevocê deve registrar a propriedade clara:
- .Left {float: left;}
- .right {float: right}
- rodapé {clear: both} fato
que os blocos com as classes esquerda e queda para a direita fora do totalfluir, isto é, todos os outros elementos ignorou a própria existência de elementos alinhados.A propriedade clear: both permite que o rodapé ou qualquer outra unidade de ver cair a partir dos elementos de fluxo e proíbe envoltório (float) em ambos os lados esquerdo e direito.Portanto, em nosso exemplo, o rodapé irá deslocar para baixo.Alinhamento
Vertical
Há casos em que o alinhamento centro conjunto insuficiente CSS-estrada, você ainda deve alterar a posição vertical do bloco de 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 em qualquer lugar.Mais frequentemente requerem o alinhamento da caixa no centro, este atributo é usado vertical-align.Suponha que existem duas unidades, uma dentro da outra.A unidade interna - elemento line-bloco (display: inline-block).É necessário alinhar a criança unidade verticalmente: alinhamento
- no limite superior - .child {vertical-align: top};
- centro alinhamento - .child {vertical-align: middle};Alinhamento
- na extremidade inferior - .child {vertical-align: bottom};
em elementos nível de bloco ou text-align, ou vertical-align se aplica.
Possíveis problemas com unidades alinhadas
Às vezes div align centro da CSS-way pode causar problemas menores.Por exemplo, usando float: por exemplo, existem três blocos: .Em primeiro lugar, .segunda e .third.O segundo e terceiro blocos são em primeiro.Um elemento com uma classe de segundo bloco alinhado à esquerda, eo último - à direita.Depois de alinhar os dois caíram para fora do córrego.Se o pai não está definido altura (por exemplo, 30em), que deixará de esticar 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 {height: 0;clear: both;}
pseudo usado muitas vezes: depois, o que também permite que você retornar aos blocos no local através da criação de psevdorasporki (neste exemplo em uma div com uma classe do contentor se encontra dentro do .primeira e contém .Left e .right):
- .deixou {float: left}
- .right {float: right}
- .container: after {content: '';display: table;clear: both;}
acima opções - a mais comum, embora haja algumas variações.Você sempre pode encontrar a maneira mais fácil e mais conveniente para criar psevdorasporki por experimentos.
Outro problema de layout freqüentemente encontrado - alinhamento de elementos linha-bloco.Depois de cada um deles espaço adicionado automaticamente.Para lidar com esta propriedade ajuda margem, a qual é definida pelo recuo negativo.Existem outros métodos que são usados com menor frequência, por exemplo, redefinir o tamanho da fonte.Neste caso, as propriedades do pai prescrito font-size: 0.Se localizado dentro de blocos de texto, as propriedades dos elementos de linha de blocos de voltar para o tamanho desejado.Por exemplo, font-size: 1em.O método não é sempre conveniente, opção com margens externos muito mais freqüentemente usado.
bloco de alinhamento permite criar o layout bonito e funcional página e é o layout geral e localização de mercadorias em lojas, e fotos em um site pequeno.
