CSS - Alinhamento Horizontal e Vertical
Elementos
de Alinhamento Central
Para
centralizar horizontalmente um elemento de bloco (como <div>), use margin: auto;
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Elementos de Alinhamento
Central</h2>
<p>Para centralizar
horizontalmente um elemento de bloco (como div), use margin: auto;</p>
<div class="center">
<p>Olá Mundo!!</p>
</div>
</body>
</html>
linhar
texto ao centro
Para
centralizar apenas o texto dentro de um elemento, use text-align: center;
<!DOCTYPE
html>
<html>
<head>
<style>
.center
{
text-align: center;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Texto
no Centro</h2>
<div
class="center">
<p>Texto centralizado</p>
</div>
</body>
</html>
Centralizar
uma imagem
Para
centralizar
uma imagem, defina as margens esquerda e direita autoe transforme-a em um block elemento:
<!DOCTYPE
html>
<html>
<head>
<style>
img
{
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h2>Centralizar
uma imagem</h2>
<p>Para
centralizar uma imagem, defina as margens esquerda e direita como automáticas e
transforme-a em um elemento de bloco. </p>
<img
src="paris.jpg" alt="Paris" style="width:40%">
</body>
</html>
Alinhar à esquerda e à
direita - usando a posição
Um
método para alinhar elementos é usar position: absolute;
<!DOCTYPE
html>
<html>
<head>
<style>
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 2px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Alinhar
à direita com a propriedade de posição</h2>
<p>Um
exemplo de como alinhar elementos à direita com a propriedade
position:</p>
<div
class="right">
<p>Em meus anos mais jovens e
vulneráveis, meu pai me deu alguns conselhos que venho pensando desde
então.</p>
</div>
</body>
</html>
Alinhar
à esquerda e à direita - usando float
Outro
método para alinhar elementos é usar a float propriedade:
<!DOCTYPE
html>
<html>
<head>
<style>
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Alinhar
à direita com a propriedade float</h2>
<p>Um
exemplo de como alinhar elementos à direita com a propriedade float:</p>
<div
class="right">
<p>Em meus anos mais jovens e
vulneráveis, meu pai me deu alguns conselhos que venho pensando desde então. </p>
</div>
</body>
</html>
O hack clearfix
<!DOCTYPE
html>
<html>
<head>
<style>
div
{
border: 3px solid #4CAF50;
padding: 5px;
}
.img1
{
float: right;
}
.img2
{
float: right;
}
.clearfix::after
{
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Sem
Clearfix</h2>
<p>Esta
imagem é flutuada para a direita. Também é mais alto que o elemento que o
contém, então transborda para fora de seu contêiner</p>
<div>
<img class="img1"
src="pineapple.jpg" alt="Pineapple" width="170"
height="170">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Phasellus imperdiet...
</div>
<h2
style="clear:right">Com o novo Clearfix moderno</h2>
<p>Adicione
o hack clearfix ao elemento que o contém, para corrigir este
problema:</p>
<div
class="clearfix">
<img class="img2"
src="pineapple.jpg" alt="Pineapple" width="170"
height="170">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Phasellus imperdiet...
</div>
</body>
</html>
Centralizar verticalmente - usando
preenchimento
Uma solução simples é usar
top e bottom padding:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
border: 3px solid
green;
}
</style>
</head>
<body>
<h2>Centralizar verticalmente com
preenchimento</h2>
<p>Neste exemplo, usamos a propriedade padding para
centralizar o elemento div verticalmente:</p>
<div class="center">
<p>Estou
centrado verticalmente. </p>
</div>
</body>
</html>
Para centralizar verticalmente
e horizontalmente, use paddinge text-align:
center:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
border: 3px solid
green;
text-align: center;
}
</style>
</head>
<body>
<h2>Centralizar com preenchimento e alinhamento de
texto</h2>
<p>Neste exemplo, usamos padding e text-align para
centralizar o elemento div tanto vertical quanto horizontalmente::</p>
<div class="center">
<p>Estou
centralizado vertical e horizontalmente. </p>
</div>
</body>
</html>
Centralizar
verticalmente - usando a altura da linha
Outro
truque é usar a line-heightpropriedade com um
valor igual à heightpropriedade:
<!DOCTYPE
html>
<html>
<head>
<style>
.center
{
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
.center
p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<h2>Centro
com altura da linha</h2>
<p>Neste
exemplo, usamos a propriedade line-height com um valor igual à propriedade
height para centralizar o elemento div:</p>
<div
class="center">
<p>Estou centralizado vertical e
horizontalmente.</p>
</div>
</body>
</html>
Centralizar
verticalmente - usando posição e transformação
Se paddinge line-height não forem
opções, outra solução é usar o posicionamento e a transform propriedade:
<!DOCTYPE
html>
<html>
<head>
<style>
.center
{
height: 200px;
position: relative;
border: 3px solid green;
}
.center
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Centralizar
com posição e transformar</h2>
<p>Neste
exemplo, usamos o posicionamento e a propriedade transform para centralizar
vertical e horizontalmente o elemento div:</p>
<div
class="center">
<p>Estou centralizado vertical e
horizontalmente. </p>
</div>
</body>
</html>
Centralizar
Verticalmente - Usando o Flexbox
Você
também pode usar o flexbox para centralizar as coisas. Observe que o
flexbox não é compatível com o IE10 e versões anteriores:
<!DOCTYPE
html>
<html>
<head>
<style>
.center
{
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Centralização
Flexbox</h2>
<p>Um
contêiner com as propriedades de justificar conteúdo e alinhar itens definidas
como centralizará o(s) item(ns) no centro (em ambos os eixos. </p>
<div
class="center">
<p>Estou centralizado vertical e
horizontalmente. </p>
</div>
</body>
</html>