Question 184012 in Html Question posted in
Some basic documentation can be found here.

Html – 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>
Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    To stack the image and text on top of each other, use d-flex and flex-direction-column to make each div go on top of each other. Because the axis has changed from horizontal to vertical, use align-items-center to center the text.

    To make it appear vertically, similarly use d-flex and align-items-center but set the div to the height of the parent with h-100. I’ve artificially increased the size of the body element as it’ll shrink to the content, otherwise. Mark up below. You may need to go full screen on the snippet to see the example work

    P.S. I’d avoid sizing images with html attributes. Better to use CSS these days.

    body {
  height: 80vh;
}
    <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" />
<div class="col-md-4 col-lg-6 left-side h-100 d-flex align-items-center">
  <div class="d-flex flex-column align-items-center">
    <img src="https://placekitten.com/200/200" alt="" width="72" height="72" />
    <h1>text1</h1>
    <h3>text2</h3>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    Add flex-direction:column to the parent container with class .d-flex
    (or use a bootstrap class that sets flex-direction to column)

    Additionally, I noticed you have a lot of !important in your CSS.
    It is good practice to eliminate as many instances of !important as possible.

    Best of luck to you!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search