Alinhamento (Alinhamento) do CSS

O CSS tem várias propriedades que podem ser usadas para alinhar elementos na página da web.

Alinhamento de texto

Pode ser configurado corretamenteAlinhamento de texto，para alinharBlocoTexto dentro do elemento.

h1　{
　　　　texto-alinhamento: centro;
}
p　{
　　　　texto-alinhamento: esquerda;
}

VejaTexto CSSTutorial, para obter mais informações sobre o formato do texto.

Centralização usando a propriedade margin

BlocoO alinhamento do centro do elemento é um dos principais significados da propriedade margin no CSS. Por exemplo, ajustando as margens laterais para auto, pode-se alinhar horizontalmente o contêiner <div>.

div　{
　　　　largura:　50%;
　　　　margem: 0 auto;
}

As regras de estilo no exemplo acima alinham o elemento horizontalmente no centro.

Alinhamento de elementos usando a propriedade position

CSS posiçãoAo usar os atributos left, right, top e bottom em conjunto com, pode alinhar o elemento em relação à janela de visualização do documento ou ao elemento pai.

.up　{
　　　　posição: absoluta;
　　　　superior: 0;
}
.down　{
　　　　posição: absoluta;
　　　　inferior: 0;
}

Para obter mais informações sobre elementos posicionados, consultePosicionamento CSSTutorial.

Alinhamento à esquerda ou direita usando a propriedade float

CSSflutuanteA propriedade pode ser usada para alinhar o componente de seu bloco contido para a esquerda ou direita dessa maneira, permitindo que o outro conteúdo flua ao lado.

Portanto, se o elemento flutuante estiver na esquerda, o conteúdo fluirá ao seu lado direito. Por outro lado, se o elemento flutuante estiver na direita, o conteúdo fluirá ao seu lado esquerdo.

div　{
　　　　largura:　200px;
　　　　float: esquerda;
}

Remover flutuante

Um dos aspectos mais confusos ao usar layouts baseados em flutuantes é o nível-pai dobrado. O elemento pai não se estica automaticamente para conter o elemento flutuante. No entanto, se o nível-pai não contiver nenhum fundo visualmente perceptível ou borda, isso não é sempre evidente, mas é importante notar e deve ser tratado para evitar problemas de layout estranhos e problemas de navegação entre navegadores, o que é muito importante. Veja a figura a seguir:

Você verá

O elemento não se estica automaticamente para conter a imagem flutuante. Você pode resolver esse problema limpando o flutuamento após o elemento flutuante dentro do contêiner, mas antes da tag de fechamento do elemento do contêiner.

Corrigindo o colapso do pai

Existem várias maneiras de resolver o problema do pai colapsado do CSS. No próximo capítulo, você será apresentado a essas soluções e exemplos em tempo real.

Solução1flutuando o contêiner

A maneira mais simples de resolver esse problema é flutuar o elemento pai contido.

.container {
　　　　float: esquerda;
　　　　background: #f2f2f2;
}

Solução2usando um Div vazio

É um método antigo, mas é uma solução simples que pode ser usada em todos os navegadores.

.clearfix {
　　　　clear: ambos;
}
/*　html code snippet　*/

Você também pode fazer isso com a tag, mas não é recomendado, pois adicionará código não semântico ao marcador.

Solução3usando o pseudo-elemento :after

o :after Elemento Pseudocom a uniãocontentA propriedade content já foi usada amplamente para resolver problemas de flutuamento.

.clearfix:after {
　　　　content: ".";
　　　　display: bloco;
　　　　height: 0;
　　　　clear: ambos;
　　　　visibility: oculto;
}

A classe .clearfix é aplicável a qualquer contêiner que tenha filhos flutuantes.