Button in the center of the screen

Asked

Viewed 11,985 times

0

I found here the solution, in case someone needs

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

Hello guys I started a new test here for an application, and I’m having trouble putting 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 the 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

  • What do you define by center? horizontal, vertical, or both?

  • both, would be two buttons one aligned on the other side in the middle of the screen both horizontal and vertical

  • 1

    could position:Absolute; top: 500px; left: 200px;

  • Felipe, post your solution as answer in the field below. Ask the question can disrupt it.

  • @Felipedeolindo It seems to me that your solution will only work in your window size.

2 answers

0


Position absolute is a static property, 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>

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://css-tricks.com/viewport-sized-typography/

  • I tried to friend your code and it got under that background image, in the middle but below

  • In form { flex-Direction: column } switch to { flex-Direction: Row }

0

You can also only use automatic margins if you only want your element to be Centralized.

.classeOuElemento{ margin: 0 auto; }

  • I understood, even so thank you but in my case the page will be off even, in only one screen, but I will try to use your solution to see

Browser other questions tagged html css div

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