How to position a button anywhere on the screen, in html

Asked

Viewed 11,440 times

1

I’m trying to position a button type "button" in the center of the screen. For this, I put it in a div, and applied to that div one css that arrow your position on the window. However, the button still appears in the left corner. Just follow my code:

<!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>
javascript html css javascript-events

2 answers

3


You forgot the " ; " after each of the styles you put in your CSS pos that didn’t work!

Still there’s another problem, the way you made the button won’t stay 100% centered, because to center right vc need to "shoot down" the height and width of the button itself. The way it is positioned in 50% axis X and 50% axis Y

So to center by discounting the height and width of the element itself use this: transform:translate(-50%, -50%)

Follow your example 100% aligned in the center!

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>

  • Thank you. I don’t really know the html and css syntax yet. I haven’t forgotten, actually I didn’t even know the semicolon. haha.

0

Browser other questions tagged javascript html css javascript-events

You are not signed in. Login or sign up in order to post.