Vertical alignment of a div

Asked

Viewed 90 times

3

Hello, I’m mounting a screen that for now is as follows:

inserir a descrição da imagem aqui

However, for this "vertical alignment" this div is, I am using a margin-top with percentage to help, but I believe that is not the right way to do... I’ve tried a few ways, using bootstrap classes, align, but it didn’t work. Someone could give me a hand ?

html {
    height: 100%;
}

body {
    overflow-x: hidden;
    overflow-y: hidden;
    background-image: linear-gradient(to top right, #a4bcb2, #34b9e9);
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.card {
    margin-top: 40%;
    border-radius: 15px;
}

#entrar {
    border-radius: 15px;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Login</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-3"></div>
            <div class="col-6">

                <div class="card">
                    <article class="card-body">
                        <h4 class="card-title text-center mb-4 mt-1">Login</h4>
                        <hr>
                        <p class="text-success text-center">Insira seus dados para acessar mais informações.</p>
                        <form>
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"> <i class="fa fa-id-card"></i> </span>
                                    </div>
                                    <input name="" class="form-control" placeholder="Número de série" type="text">
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"> <i class="fa fa-user"></i> </span>
                                    </div>
                                    <input name="" class="form-control" placeholder="Usuário" type="text">
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"> <i class="fa fa-lock"></i> </span>
                                    </div>
                                    <input class="form-control" placeholder="Senha" type="password">
                                </div>
                            </div>

                            <div class="form-group">
                                <button type="submit" class="btn btn-primary btn-block" id="entrar"> Acessar  </button>
                            </div>
                            <!--<p class="text-center"><a href="#" class="btn">Esqueceu sua senha?</a></p>-->
                        </form>
                    </article>
                </div>

            </div>

            <div class="col-3"></div>
        </div>
    </div>

</body>
</html>

EDIT 1: using the flex property, dictated in André’s answer, was the following command: inserir a descrição da imagem aqui

html css bootstrap-4 alignment

2 answers

2

You can use the flex html for this, see below:

html {
    height: 100%;
}

body {
    overflow-x: hidden;
    overflow-y: hidden;
    background-image: linear-gradient(to top right, #a4bcb2, #34b9e9);
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.card {
    width: 50%;
    border-radius: 15px;
}

#entrar {
    border-radius: 15px;
}

.container {
    height:100%;
  	display:flex;
    align-items: center;
    justify-content:center;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Login</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="container">
        <div class="card">
            <article class="card-body">
                <h4 class="card-title text-center mb-4 mt-1">Login</h4>
                <hr>
                <p class="text-success text-center">Insira seus dados para acessar mais informações.</p>
                <form>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"> <i class="fa fa-id-card"></i> </span>
                            </div>
                            <input name="" class="form-control" placeholder="Número de série" type="text">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"> <i class="fa fa-user"></i> </span>
                            </div>
                            <input name="" class="form-control" placeholder="Usuário" type="text">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"> <i class="fa fa-lock"></i> </span>
                            </div>
                            <input class="form-control" placeholder="Senha" type="password">
                        </div>
                    </div>

                    <div class="form-group">
                        <button type="submit" class="btn btn-primary btn-block" id="entrar"> Acessar  </button>
                    </div>
                    <!--<p class="text-center"><a href="#" class="btn">Esqueceu sua senha?</a></p>-->
                </form>
            </article>
        </div>
    </div>

</body>
</html>

  • Thank you for the answer, André. Really he lined up vertically, but brought me another conflict... I didn’t understand exactly why, but using the flex, the card got extremely thin, you know? If you can give me more help, I’d appreciate it.

  • I left an Edit in the question for you to view better

  • Opa Samuel, you can simply set a size for the card, I will modify the answer with this.

2


No need to use extra CSS Bootstrap itself has native classes for this. Just put h-100 in the container and in the row, and puts the class align-items-center

<div class="container h-100">
<div class="row h-100 align-items-center">

I didn’t touch anything in your CSS, I just removed the margin-top you now no longer need!

See the full code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Login</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <style>
  html {
    height: 100%;
  }

  body {
    overflow-x: hidden;
    overflow-y: hidden;
    background-image: linear-gradient(to top right, #a4bcb2, #34b9e9);
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }

  .card {
    /* margin-top: 40%; */
    border-radius: 15px;
  }

  #entrar {
    border-radius: 15px;
  }
  </style>
</head>
<body>
  <div class="container h-100">
      <div class="row h-100 align-items-center">
          <div class="col-3"></div>
          <div class="col-6">

              <div class="card">
                  <article class="card-body">
                      <h4 class="card-title text-center mb-4 mt-1">Login</h4>
                      <hr>
                      <p class="text-success text-center">Insira seus dados para acessar mais informações.</p>
                      <form>
                          <div class="form-group">
                              <div class="input-group">
                                  <div class="input-group-prepend">
                                      <span class="input-group-text"> <i class="fa fa-id-card"></i> </span>
                                  </div>
                                  <input name="" class="form-control" placeholder="Número de série" type="text">
                              </div>
                          </div>

                          <div class="form-group">
                              <div class="input-group">
                                  <div class="input-group-prepend">
                                      <span class="input-group-text"> <i class="fa fa-user"></i> </span>
                                  </div>
                                  <input name="" class="form-control" placeholder="Usuário" type="text">
                              </div>
                          </div>

                          <div class="form-group">
                              <div class="input-group">
                                  <div class="input-group-prepend">
                                      <span class="input-group-text"> <i class="fa fa-lock"></i> </span>
                                  </div>
                                  <input class="form-control" placeholder="Senha" type="password">
                              </div>
                          </div>

                          <div class="form-group">
                              <button type="submit" class="btn btn-primary btn-block" id="entrar"> Acessar  </button>
                          </div>
                          <!--<p class="text-center"><a href="#" class="btn">Esqueceu sua senha?</a></p>-->
                      </form>
                  </article>
              </div>

          </div>

          <div class="col-3"></div>
      </div>
  </div>

</body>
</html>

  • 1

    H100 is height:100%

  • Opa Hugo, thanks man, worked as expected, turned out great.

  • 1

    @Mauroalmeida that same 100% ! Mportant in fact

  • @Samuelmachado vlw young

  • @hugocsl is mad at css itself.

  • 1

    @Thiaguinhoembasamento haha the nego here is blurred! is nois

Show 1 more comment

Browser other questions tagged html css bootstrap-4 alignment

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