Button in the center of the screen

Question

Button in the center of the screen

Navigation

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

0

I found the solution here, if anyone needs it

position:absolute;
top: 500px;
left: 200px;

Hello everyone, I've got a new test here for an application, and I'm having trouble getting the button in the center of HTML via css, follow the code:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
    <title>TESTE SCANIA</title>
     <!-- Aqui chamamos o nosso arquivo css externo -->
    <link rel="stylesheet" type="text/css"  href="css\estilos.css" />


</head>
<body>
    <div id="teste">
    </div>
<form>
   <div id="botao">
      <input type="submit" name="INICIAR TESTE" value="INICIAR TESTE" class="botaoEnviar" />
   </div>
</form>
</body>
</html>

and css

body{
    background-color: #373435;
}

#teste{
    width: 1920px;
    height: 1080px;
    background-image: url(background.jpg);
    background-repeat: no-repeat;
}

#botao{ text-align: absolute }
.botaoEnviar{
    width: 350px;
    text-align: absolute;
        left: 100%;
        top: 100%;
        margin-left:-110px;
        margin-top:-40px;
    padding: 15px 20px;
    border: 1px solid #eee;
    border-radius: 6px;
    background-color: #FCC302;
    font-size: 18px;

}

html css div

asked by anonymous 14.07.2017 / 19:24

2 answers

0

You can also just use automatic margins if you want your element to just center.

.classeOuElemento{ margin: 0 auto; }

14.07.2017 / 20:49

In which table does wordpress store the posts layout? How to convert a table to json?

score 0 · Accepted Answer

Position absolute is a static property, it does not serve as a parameter to center content, so on each screen your application will have a different size.

Use property relativas example

body{
    background-color: #373435;
    height: 100%;
}
form{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 100vh;
}
.botaoEnviar{
    width: 350px;
    padding: 15px 20px;
    border: 1px solid #eee;
    border-radius: 6px;
    background-color: #FCC302;
    font-size: 18px;
}

<body>
    <div id="teste">
    </div>
<form>
      <input type="submit" name="INICIAR TESTE" value="INICIAR TESTE" class="botaoEnviar" />
</form>
</body>

link