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

Question

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

Navigation

#1 by (2 votes)
#2 by (1 votes)

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 a css that arrows its position in the window. However, the button continues to appear in the left corner. Here is 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-eventos

asked by anonymous 11.04.2018 / 22:11

2 answers

1

Modify this section:

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

Running: link

11.04.2018 / 22:23

how to assign html code in the javascript variable? Create variables programmatically [duplicate]

score 2 · Accepted Answer

You forgot the " ; " after each of the styles you put in your CSS pos this did not work!

Even though there is another problem, the way you did the button will not be% centralized, because to center right you must "lower" the height and width of the button itself. As it stands, it is positioned in 100% of axis 50% and X axis 50%

Then to center by discounting the height and width of the element itself use this: Y

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>