 |
|
||||
Você está aqui: CSS ::: Dicas & Truques ::: Alinhamento de Elementos, Imagens e Textos |
Como centralizar uma DIV na vertical e na horizontal usando as propriedades position, top, left e transform do CSSQuantidade de visualizações: 673 vezes |
|
Em algumas situações nós precisamos centralizar uma DIV em nossa página HTML, talvez com o propósito de exibir um aviso, uma imagem, etc. Nesta dica mostrarei como podemos centralizar a DIV tanto na vertical quanto na horizontal. Para isso nós vamos usar as propriedades position, top, left e transform do CSS. Experimente alterar as dimensões da DIV e veja que não importa as dimensões dela, ela estará sempre centralizada verticalmente e horizontalmente. Veja a página HTML e CSS completa para o exemplo:
<!doctype html>
<html>
<head>
<title>Estudos CSS</title>
<style>
/* centraliza a DIV na vertical e na horizontal */
#m_div{
border: 1px solid black;
padding: 20px;
background-color: #e0f2f1;
width: 200px;
height: 150px;
position: absolute;
top: 50%;
|
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de CSS |
Dicas e truques de outras linguagens |
|
Portugol - Como resolver uma equação do segundo grau em Portugol - Como calcular Bhaskara em Portugol |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
