Este artigo demonstra o alinhamento correto de um div com exemplos práticos usando CSS.
- Como alinhar corretamente um div usando CSS?
- Usando a propriedade “float”
- Usando a propriedade “certa”
- Usando layout flexível
- Usando Layout de Grade
Como alinhar corretamente um div usando CSS?
O desenvolvedor pode alinhar corretamente cada elemento ou imagem div de uma maneira que torne o site mais atraente. Devido à sua alta flexibilidade, os elementos div podem ser utilizados de várias maneiras na página da Web, como definir seções de página, criar colunas e agrupar conjuntos de conteúdo relacionado.
Siga os métodos abaixo para alinhar o div à direita:
Método 1: Usando a propriedade “float”
No arquivo HTML, crie um div e atribua a ele uma classe de “ alinhar à direita ”. Esta classe e div são usados ao longo deste artigo.
< div aula = 'alinhar à direita' >
< p > Este é algum conteúdo. < / p >
< / div >
Agora, selecione essa classe div “ alinhar à direita ” e atribua as propriedades CSS. Estas propriedades são utilizadas para uma melhor visualização:
.align-to-right {
flutuar: direita;
preenchimento: 10px;
fundo- cor : Rosa quente;
}
No código acima, o “ flutuador ” é definida à direita. Ele flutua ou move o div na direção certa na página da web. As propriedades de preenchimento e cor de fundo são definidas como “ 10px ' e ' Rosa quente ” respectivamente.
Depois de compilar o trecho de código acima, a página da Web fica assim:
A saída acima confirma que o div se move na direção certa.
Método 2: Usando a propriedade “right”
No CSS, selecione a classe div e defina o “ certo ” para 0. Garante que a distância do div selecionado do lado direito seja igual a zero. Em seguida, defina o “ posição ” propriedade para “ absoluto ” para tornar a posição div fixa. No final, aplique algumas propriedades de estilo para melhor visualização:
.align-to-right{
certo: 0 ;
posição: absoluta;
preenchimento: 10px;
fundo- cor : roxo médio;
}
Depois de executar o código, a página da Web fica assim:
A saída mostra que o div agora está alinhado à direita.
Método 3: Usando o Flex Layout
Flex é o método mais eficiente e mantém o layout durante o redimensionamento da janela. O div pode ser alinhado à direita usando CSS “ Layout flexível ” propriedades. O layout Flex contém muitas propriedades para diferentes propósitos.
No arquivo HTML, crie um div pai e dentro dele crie dois divs irmãos. Além disso, atribua a cada div uma classe exclusiva:
< div aula = 'alinhar à direita' >< div aula = 'Esquerda alinhada' >
< p >isso é mais contente .< / p >
< / div >
< div aula = 'alinhado à direita' >
< h1 >Olá do Linuxhint < / h1 >
< / div >
< / div >
Agora dentro do “
exibição: flexível;
justificar- contente : espaço entre;
}
.alinhado à direita {
auto-alinhamento: extremidade flexível;
preenchimento: 10px;
fundo- cor : roxo médio;
}
No código acima,
- Atribuir “ flex ” e “espaço entre” valores para o “ mostrar ' e ' justificar-conteúdo ” propriedades, respectivamente. Essas propriedades tornam o div um flex e colocam espaçamento igual entre os divs filho.
- O ' alinhar-se ” propriedade é definida como “ extremidade flexível ”, o que faz com que ele se alinhe ao lado direito do contêiner.
Depois de executar o código acima, a página da Web fica assim:
A saída mostra que o div está alinhado à direita usando o layout flexível.
Método 4: Usando Layout de Grade
O layout da grade também pode ser utilizado para alinhar à direita o div. A estrutura do código HTML permanece a mesma:
.align-to-right {exibição: grade;
grade-modelo-colunas: repita ( 2 , 1 fr ) ;
}
.alinhado à direita {
grade-coluna- começar : 2 ;
preenchimento: 10px;
fundo- cor : verde-azulado;
}
A descrição do código segue abaixo:
- Primeiro, selecione a classe div pai “ .align-to-right ” e defina seu “ mostrar ” propriedade para “ grade ”.
- Em seguida, crie duas colunas com tamanho igual usando “ grade-modelo-colunas ' definido como ' repetir(2, 1fr) ”.
- No final, selecione a classe div filha “ .alinhado à direita ” e defina o “ grade-coluna-início ” para 2. Esta propriedade inicia o elemento da segunda coluna, ou seja, do lado direito.
Depois de executar o código acima, a página da Web ficará assim:
A saída ilustra que o div agora está alinhado à direita usando o “ grade ” propriedades de layout.
Conclusão
Para alinhar o div na direção certa, use “ flutuador ”, “ certo ”, “ layout flexível ', e ' layout de grade ” propriedades. O ' flutuador ” define a propriedade à direita atribuindo o valor “ 0px ”. Para o ' flex ” propriedade, defina a exibição para flex e use o “ alinhar-se ” propriedade para “ extremidade flexível ”. Usando a propriedade grid, crie duas colunas de tamanho igual e faça o div filho começar na segunda coluna.