Center the buttons

Question

Center the buttons

Asked 3 years, 10 months ago

Viewed 25 times

0

I would like to leave the buttons centered, but I’m not getting, could someone give me a light? Thank you already! I would like to leave the forgot password button further to the right.

@charset "utf-8";
/* Documento CSS - CSS Document */
body,html{
  height: 100%; 
  overflow: hidden;
  background-image: url(https://i.imgur.com/X8ApJ7k.jpg);
  background-size: cover;
}
h1{
    text-align: center;
    background-color: #8AC32B;
    color: white;
    font-family: "Open Sans Condesed", sans-serif;
}

/* L-form design da aba de login.. */
.l-form{
  background-color:rgba(39, 41, 45, 0.5);
  border-radius:10px;
  padding: 12px;
}


.i-form{
  border-radius:12px;
  padding: 12px;
}

.relative {
  position: relative;
  width: 50%;
  bottom: 5px;
  border: 3px solid #8AC007;
} 



.myButton {
    box-shadow:inset 0px 1px 3px 0px #8AC32B;
    background:linear-gradient(to bottom, #8AC32B 5%, #8AC32B 100%);
    background-color:#768d87;
    border-radius:10px;
    border:1px solid #566963;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    padding:8px 25px;
    text-decoration:none;
    text-shadow:0px -1px 0px #8AC32B;
}
.myButton:hover {
    background:linear-gradient(to bottom, #6c7c7c 5%, #8AC32B 100%);
    background-color:#8AC32B;
}
.myButton:active {
    position:relative;
    top:1px;
}

.myButton2 {
    box-shadow:inset 0px 1px 3px 0px #8AC32B;
    background:linear-gradient(to bottom, #8AC32B 5%, #8AC32B 100%);
    background-color:#768d87;
    border-radius:10px;
    border:1px solid #566963;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    padding:8px 25px;
    text-decoration:none;
    text-shadow:0px -1px 0px #8AC32B;
}
.myButton:hover {
    background:linear-gradient(to bottom, #6c7c7c 5%, #8AC32B 100%);
    background-color:#8AC32B;
}
.myButton:active {
    position:relative;
    top:1px;
}

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./CSS-do-site.css">
<meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<title>Site</title>
</head>
<body>
    <div class="row align-items-center h-100 ">
    <div class="col-8 col-md-3 col-xs-8 mx-auto l-form offset-xl-5">
        <form class="form" method="post" id="login-form">
            <img src="https://i.imgur.com/1hdLnj7.png" width="351" height="150" class="row mx-auto rounded-circle"> 
            <div class="form-group ">
                <input type="text" placeholder="E-mail" class="form-control i-form">
            </div>
            <div class="form-group">
                <input type="password" placeholder="Senha" class="form-control i-form">
            </div>
            <div class="form-group">
                <button type="submit" onclick="userLogin()" class="btn btn-dark btn-md btn-block">Entrar</button>
            </div>
            <a href="#" class="myButton ">Cadastro</a>
            <a href="#" class="myButton2 ">Esqueci minha senha</a>
        </form>
    </div>
        
</div>
<h1 class="text-center"></h1> <!-- Título se for necessário-->
<div class="row align-items-center h-100 ">
<div class="col-8 col-md-3 col-xs-8 mx-auto l-form offset-xl-5">
    <form class="form" method="post">
          <img src="https://i.imgur.com/1hdLnj7.png" width="351" height="150" class="row mx-auto rounded-circle">
          <div class="form-group ">
            <input type="text" placeholder="E-mail" class="form-control i-form">
          </div>
          <div class="form-group">
            <input type="password" placeholder="Senha" class="form-control i-form">
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-dark btn-md btn-block">Entrar</button>
          </div>
        </form>
</div>
</div>
</body>
</html>

Hello @Edulink, welcome to stackoverflow. To help your question is better to put code focused on it. See that its function userLogin has nothing to do with the position of the buttons. A question more enchuta makes it much easier who wants to help you.

– Guto

2020/11/13 at 13:56
Very grateful friend, strong hug!

– Edulink

2020/11/13 at 14:00

1 answer

Browser other questions tagged javascript css html5

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

by hugocsl • **65,517** points · Answer 1 · 2020-11-13T13:57:39+00:00

Guy’s basically not fitting both btn in the same row pq vc defined the column where the Form is inside as col-3, if it’s col-4 already fits everything and the btn will not break the line, to align the btns in the center just put the class text-center of Bootstrap himself

<!doctype html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="./CSS-do-site.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<title>Site</title>
<style>
  @charset "utf-8";

  /* Documento CSS - CSS Document */
  body,
  html {
    height: 100%;
    overflow: hidden;
    background-image: url(https://i.imgur.com/X8ApJ7k.jpg);
    background-size: cover;
  }

  h1 {
    text-align: center;
    background-color: #8AC32B;
    color: white;
    font-family: "Open Sans Condesed", sans-serif;
  }

  /* L-form design da aba de login.. */
  .l-form {
    background-color: rgba(39, 41, 45, 0.5);
    border-radius: 10px;
    padding: 12px;
  }


  .i-form {
    border-radius: 12px;
    padding: 12px;
  }

  .relative {
    position: relative;
    width: 50%;
    bottom: 5px;
    border: 3px solid #8AC007;
  }



  .myButton {
    box-shadow: inset 0px 1px 3px 0px #8AC32B;
    background: linear-gradient(to bottom, #8AC32B 5%, #8AC32B 100%);
    background-color: #768d87;
    border-radius: 10px;
    border: 1px solid #566963;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    padding: 8px 25px;
    text-decoration: none;
    text-shadow: 0px -1px 0px #8AC32B;
  }

  .myButton:hover {
    background: linear-gradient(to bottom, #6c7c7c 5%, #8AC32B 100%);
    background-color: #8AC32B;
  }

  .myButton:active {
    position: relative;
    top: 1px;
  }

  .myButton2 {
    box-shadow: inset 0px 1px 3px 0px #8AC32B;
    background: linear-gradient(to bottom, #8AC32B 5%, #8AC32B 100%);
    background-color: #768d87;
    border-radius: 10px;
    border: 1px solid #566963;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    padding: 8px 25px;
    text-decoration: none;
    text-shadow: 0px -1px 0px #8AC32B;
  }

  .myButton:hover {
    background: linear-gradient(to bottom, #6c7c7c 5%, #8AC32B 100%);
    background-color: #8AC32B;
  }

  .myButton:active {
    position: relative;
    top: 1px;
  }
</style>
</head>

<body>
  <div class="row align-items-center h-100 ">
    <div class="col-8 col-md-4 col-xs-8 mx-auto l-form offset-xl-5">
      <form class="form text-center" method="post" id="login-form">
        <img src="https://i.imgur.com/1hdLnj7.png" width="351" height="150" class="row mx-auto rounded-circle">
        <div class="form-group ">
          <input type="text" placeholder="E-mail" class="form-control i-form">
        </div>
        <div class="form-group">
          <input type="password" placeholder="Senha" class="form-control i-form">
        </div>
        <div class="form-group">
          <button type="submit" onclick="userLogin()" class="btn btn-dark btn-md btn-block">Entrar</button>
        </div>
        <a href="#" class="myButton ">Cadastro</a>
        <a href="#" class="myButton2 ">Esqueci minha senha</a>
      </form>
    </div>

  </div>
  <h1 class="text-center"></h1> <!-- Título se for necessário-->
  <div class="row align-items-center h-100 ">
    <div class="col-8 col-md-4 col-xs-8 mx-auto l-form offset-xl-5">
      <form class="form text-center" method="post">
        <img src="https://i.imgur.com/1hdLnj7.png" width="351" height="150" class="row mx-auto rounded-circle">
        <div class="form-group ">
          <input type="text" placeholder="E-mail" class="form-control i-form">
        </div>
        <div class="form-group">
          <input type="password" placeholder="Senha" class="form-control i-form">
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-dark btn-md btn-block">Entrar</button>
        </div>
      </form>
    </div>
  </div>

</body>

</html>