 |
|
||||
 Planilha Web - Planilhas e Calculadoras online para estudantes e profissionais de Engenharia Civil, Engenharia Elétrica e Engenharia Mecânica. |
|||||
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: 785 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: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!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%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="m_div">Gosto muito de HTML5</di>
</body>
</html>
|
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de CSS |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
