1

Estou tentando posicionar um botão tipo "button" no centro da tela. Para isso, eu coloquei ele em uma div, e apliquei a essa div um css que seta a sua posição na window. Porém, o botão continua aparecendo no canto esquerdo. Segue o meu código:

<!DOCTYPE html>
<html>
<!--Tratar um click com html5: -->
<head>
<style type="text/css">
    #centralizar{position:absolute top:50% left:50%}
</style> 
</head>
<body>
    <script>
    function fuiClicado(){
        document.write("Fui clicado");
    }
    </script>
    <div id="centralizar">
    <button name="cent" onClick="fuiClicado()"> Clique Aqui</button>
    </div>
</body>

</html>

2 Respostas 2

3

Vc esqueceu os " ; " após cada um dos estilos que vc colocou no seu CSS pos isso não funcionou!

Mesmo assim tem outro problema, da forma que vc fez o botão não vai ficar 100% centralizado, pois para centralizar direito vc precisa "abater" a altura e a largura do próprio botão. Da forma que está ele fica posicionado em 50% do eixo X e 50% do eixo Y

Então para centralizar descontando a altura e largura do próprio elemento use isso: transform:translate(-50%, -50%)

Segue o seu exemplo 100% alinhado no centro!

function fuiClicado(){
        document.write("Fui clicado");
    }
#centralizar{
    position:absolute; 
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}
<div id="centralizar">
    <button name="cent" onClick="fuiClicado()"> Clique Aqui</button>
</div>

1
  • Obrigado. Na verdade eu não domino a sintaxe do html e css ainda. Eu não esqueci, na verdade eu nem sabia do ponto e vírgula. haha. Commented 11/04/2018 às 21:18
0

Modifique este trecho:

#centralizar{position: absolute; top:50%; left:50%}

em funcionamento: https://jsfiddle.net/e92qeyyn/2/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .