Search code examples
htmlcssbootstrap-4flexbox

Why aren't the items lining up vertically centered?

I want to line up my image and texts vertically centered. One after another in a new line. Specifically the left side, where there is image, text1, and text2 Ideally it would be

 |       Image      |

 |       text1      |

 |       text2      |

all centered vertically and horizontally

Implementation:

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
  <!-- Custom styles for this template -->
  <link href="./index.css" rel="stylesheet" />
  <title>Login</title>
</head>

<body>
  <div class="container-fluid ps-md-0">
    <div class="row g-0">
      <div class="col-md-4 col-lg-6 left-side">
        <div class="d-flex align-items-center justify-content-center text-center">
          <img src="../pictures/logo.png" alt="" width="72" height="72" />

          <h1>text1</h1>
          <h3>text2</h3>


        </div>
      </div>

      <div class="col-md-8 col-lg-6">
        <div class="login d-flex align-items-center py-5">
          <div class="container">
            <div class="row">
              <div class="col-md-9 col-lg-8 mx-auto">
                <h3 class="login-heading mb-4">Welcome back!</h3>

                <!-- Sign In Form -->
                
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

Solution

  • Add d-flex and justify-content-center to the parent container of the parent container that contains all elements. Then add text-center to the parent container of all elements.

    <!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
        <!-- Custom styles for this template -->
        <link href="./index.css" rel="stylesheet" />
        <title>Login</title>
    </head>

    <body>
        <div class="container-fluid ps-md-0">
            <div class="row g-0">
                <div class="col-md-4 col-lg-6 left-side d-flex justify-content-center">
                    <div class="text-center">
                        <img src="https://via.placeholder.com/500x500.png" alt="" width="72" height="72" />
                        <h1>Text</h1>
                        <h3>Text</h3>
                    </div>
                </div>

                <div class="col-md-8 col-lg-6">
                    <div class="login d-flex align-items-center py-5">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-9 col-lg-8 mx-auto">
                                    <h3 class="login-heading mb-4">Welcome back!</h3>
                                    <!-- Sign In Form -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

    Learn more about Bootstrap Flex and Bootstrap Utilities Spacing.