Quando se trata de web design, uma das tarefas mais comuns é centralizar elementos na página. A centralização de uma div ou texto pode ser feita usando CSS, que é uma das principais linguagens utilizadas para a estilização de sites. Neste artigo, explicaremos as técnicas para centralizar uma div ou texto com CSS.
centralizar uma div com CSS
Centralização horizontal
Para centralizar uma div horizontalmente, podemos usar a propriedade CSS “margin” com os valores “auto” na esquerda e direita da div. Aqui está um exemplo:
div { width: 50%; margin: 0 auto; }
Neste exemplo, a largura da div é definida como 50% da largura da janela do navegador. Em seguida, a propriedade “margin” é definida como “0 auto”, o que significa que não há margem superior ou inferior e que as margens esquerda e direita devem ser ajustadas automaticamente para centralizar a div.
Centralização vertical
Para centralizar uma div verticalmente, podemos usar a técnica conhecida como “flexbox“. Isso envolve o uso de duas propriedades CSS: “display” e “align-items”. Aqui está um exemplo:
container {
display: flex;
align-items: center;
height: 100vh;
}
.content {
margin: 0 auto;
}
Neste exemplo, a div “container” é definida como um “flex container” usando a propriedade “display: flex”. Em seguida, a propriedade “align-items” é definida como “center”, o que alinha o conteúdo verticalmente no centro da div. A altura da div “container” também é definida como “100vh” para preencher a altura da janela do navegador.
A div “content” é então centralizada horizontalmente dentro da div “container” usando a mesma técnica descrita na seção anterior.
Centralizando um texto com CSS
Centralização horizontal
Para centralizar um texto horizontalmente, podemos usar a propriedade “text-align” com o valor “center”. Aqui está um exemplo:
p {
text-align: center;
}
Neste exemplo, a propriedade “text-align” é definida como “center”, o que centraliza o texto horizontalmente dentro do elemento “p”.
Centralização vertical
Para centralizar um texto verticalmente, podemos usar a técnica “table-cell“. Isso envolve o uso de duas propriedades CSS: “display” e “vertical-align”. Aqui está um exemplo:
div {
display: table-cell;
vertical-align: middle;
height: 200px;
}
p {
margin: 0;
}
Neste exemplo, a div é definida como um “table-cell” usando a propriedade “display”. Em seguida, a propriedade “vertical-align” é definida como “middle”, o que centraliza o conteúdo verticalmente dentro da div. A altura da div também é definida para garantir que ela tenha espaço suficiente para o conteúdo.
O elemento “p” dentro da div é então configurado para ter uma margem de zero para que ele possa ser centralizado dentro da div.
