What is the best way to align text above a wrapper box?

Question

What is the best way to align text above a wrapper box?

After watching a tutorial on YouTube about creating a simple login form, I decided to customize it with some personal touches.

I wanted to include a "Welcome" text above the login form, but when using h1, the text appeared next to the box rather than above it. To provide a clearer visual, here's an image of how I envision the layout:

https://i.sstatic.net/PE1Tm.png

Below is the code snippet I have been working on:

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}


body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-image: linear-gradient(to left,
    #d4d4d4,
    #dedede,
    #ececec,
    #f5f5f5);
}

.wrapper{
    width: 400px;
    background: whitesmoke;
    color: fff;
    border-radius: 20px;
    padding: 30px 20px;
    align-items: center;
}

.wrapper form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wrapper table {
    width: 100%;
}

.wrapper td {
    padding: 5px;
}


.wrapper h1{
    font-size: 30px;
    text-align: center;
}

.wrapper .input-box{
    width: 100%;
    height: 40px;
    margin: 40px 0;
}

/* .input-box input{
    width: 70%;
    height: 60%;
    background: transparent;
    border: none;
    outline: auto black;
    border: 2px solid rgba (255,255,255,.2);
    border-radius: 40px;
    font-size: 18px;
    color: black;
    padding: 15px 20px 15px 15px;
} */

.input-box i{
    /* position: absolute;
    transform: translateY(-50%); */
    right: 2px;
    top: 50%;
    font-size: 20px;
}

.wrapper .btn {
    width: 30%;
    height: 35px;
    background: #1570EF;
    border: none;
    outline: none;
    border-radius: 40px;
    margin-top: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    cursor: pointer;
    font-size: 16px;
    color: white;
    font-weight: 600;
}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5c7cacad1d6d1d7c4d5e5908b958b97">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
        integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/login.css') }}">
    <title>Login</title>
</head>

<body>
    <div class="wrapper">
        <form action="">
            <h1>Login</h1>
            <table>
                <tr>
                    <td><label for="username">Username/ID</label></td>
                    <td><input type="text" id="username" name="username" required></td>
                    <td><i class="fas fa-user me-2"></i></td>
                </tr>
                <tr>
                    <td><label for="password">Password</label></td>
                    <td><input type="password" id="password" name="password" required></td>
                    <td><i class="fa-solid fa-lock"></i></td>
                </tr>
            </table>
            <button type="submit" class="btn">Login</button>
        </form>
    </div>
</body>

</html>

html css

Answer 1

Answer №1

The issue arose because the .wrapper container is nested inside a flex container, specifically the <body>, for centering purposes. This led to alignment conflicts when an additional item was inserted before it.

To resolve this issue, I introduced a new element to encapsulate both the h1 and the .wrapper elements, ensuring only one child remained centered within the <body>.

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-image: linear-gradient(to left, #d4d4d4, #dedede, #ececec, #f5f5f5);
}

h1 {
  font-size: 30px;
  text-align: center;
}

.wrapper {
  width: 400px;
  background: whitesmoke;
  color: fff;
  border-radius: 20px;
  padding: 30px 20px;
  align-items: center;
}

.wrapper form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wrapper table {
  width: 100%;
}

.wrapper td {
  padding: 5px;
}

.wrapper h2 {
  font-size: 30px;
  text-align: center;
}

.wrapper .input-box {
  width: 100%;
  height: 40px;
  margin: 40px 0;
}


/* .input-box input{
    width: 70%;
    height: 60%;
    background: transparent;
    border: none;
    outline: auto black;
    border: 2px solid rgba (255,255,255,.2);
    border-radius: 40px;
    font-size: 18px;
    color: black;
    padding: 15px 20px 15px 15px;
} */

.input-box i {     
  right: 2px;      
  top: 50%;       
  font-size: 20px; 
}

.wrapper .btn {
  width: 30%;
  height: 35px;
  background: #1570EF;
  border: none;
  outline: none;
  border-radius: 40px;
  margin-top: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  cursor: pointer;
  font-size: 16px;
  color: white;
  font-weight: 600;
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34565b5b40474046554474011a041a06">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer"
 />
  <link rel="stylesheet" type="text/css" href="{{ asset('css/login.css') }}">
  <title>Login</title>
</head>

<body>
  <div class="wrapper-wrapper">
     <h1>Welcome</h1>
     <div class="wrapper">
       <form action="">
         <h2>Login</h2>
         <table>
           <tr>
             <td><label for="username">Username/ID</label></td>
            <td><input type="text" id="username" name="username" required></td>
            <td><i class="fas fa-user me-2"></i></td>
          </tr>
          <tr>
            <td><label for="password">Password</label></td>
            <td><input type="password" id="password" name="password" required></td>
            <td><i class="fa-solid fa-lock"></i></td>
          </tr>
        </table>
        <button type="submit" class="btn">Login</button>
      </form>
     </div>
   </div>
 </body>

 </html>

Answer 2

The issue arose because the .wrapper container is nested inside a flex container, specifically the <body>, for centering purposes. This led to alignment conflicts when an additional item was inserted before it.

To resolve this issue, I introduced a new element to encapsulate both the h1 and the .wrapper elements, ensuring only one child remained centered within the <body>.

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-image: linear-gradient(to left, #d4d4d4, #dedede, #ececec, #f5f5f5);
}

h1 {
  font-size: 30px;
  text-align: center;
}

.wrapper {
  width: 400px;
  background: whitesmoke;
  color: fff;
  border-radius: 20px;
  padding: 30px 20px;
  align-items: center;
}

.wrapper form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wrapper table {
  width: 100%;
}

.wrapper td {
  padding: 5px;
}

.wrapper h2 {
  font-size: 30px;
  text-align: center;
}

.wrapper .input-box {
  width: 100%;
  height: 40px;
  margin: 40px 0;
}


/* .input-box input{
    width: 70%;
    height: 60%;
    background: transparent;
    border: none;
    outline: auto black;
    border: 2px solid rgba (255,255,255,.2);
    border-radius: 40px;
    font-size: 18px;
    color: black;
    padding: 15px 20px 15px 15px;
} */

.input-box i {     
  right: 2px;      
  top: 50%;       
  font-size: 20px; 
}

.wrapper .btn {
  width: 30%;
  height: 35px;
  background: #1570EF;
  border: none;
  outline: none;
  border-radius: 40px;
  margin-top: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  cursor: pointer;
  font-size: 16px;
  color: white;
  font-weight: 600;
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34565b5b40474046554474011a041a06">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer"
 />
  <link rel="stylesheet" type="text/css" href="{{ asset('css/login.css') }}">
  <title>Login</title>
</head>

<body>
  <div class="wrapper-wrapper">
     <h1>Welcome</h1>
     <div class="wrapper">
       <form action="">
         <h2>Login</h2>
         <table>
           <tr>
             <td><label for="username">Username/ID</label></td>
            <td><input type="text" id="username" name="username" required></td>
            <td><i class="fas fa-user me-2"></i></td>
          </tr>
          <tr>
            <td><label for="password">Password</label></td>
            <td><input type="password" id="password" name="password" required></td>
            <td><i class="fa-solid fa-lock"></i></td>
          </tr>
        </table>
        <button type="submit" class="btn">Login</button>
      </form>
     </div>
   </div>
 </body>

 </html>

Answer 3

Answer №2

*In order to position text above a wrapper box in HTML, you can utilize the element as a container for both the text and the wrapper box. Below is an example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>;
    <meta name="viewport" content="width=device-width, initial-scale=1.0>;
    <title>Text Above Wrapper Box</title>
    <style>
        .container {
            text-align: center; /* Center align the text */
        }

        .text-above {
            margin-bottom: 20px; /* Create space between text and wrapper box */
        }

        .wrapper-box {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin: 0 auto; /* Horizontally center the wrapper box */
        }
    </style>
</head>
<body>
    <div class="container">
        <p class="text-above">Text Above Wrapper Box</p>
        <div class="wrapper-box"></div>
    </div>
</body>
</html>

example:emphasized text*

Answer 4

*In order to position text above a wrapper box in HTML, you can utilize the element as a container for both the text and the wrapper box. Below is an example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>;
    <meta name="viewport" content="width=device-width, initial-scale=1.0>;
    <title>Text Above Wrapper Box</title>
    <style>
        .container {
            text-align: center; /* Center align the text */
        }

        .text-above {
            margin-bottom: 20px; /* Create space between text and wrapper box */
        }

        .wrapper-box {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin: 0 auto; /* Horizontally center the wrapper box */
        }
    </style>
</head>
<body>
    <div class="container">
        <p class="text-above">Text Above Wrapper Box</p>
        <div class="wrapper-box"></div>
    </div>
</body>
</html>

example:emphasized text*

What is the best way to align text above a wrapper box?

Answer №1

Answer №2

Similar questions

What is the best way to align the elements to the beginning and place the flexbox container in the center

When ALIGN-ITEMS: CENTER is removed, the <a> element expands to fill the entire line

Styling the jQuery location picker input with background and focus effects

Set the minimum width of CSS headers <h1, h2, h3> to align next to a floated image

use a jQuery function to submit a form

The CSS Image Gallery refuses to be centered

When scrolling, the text or logo inside the navbar seems to dance with a slight wiggling or

Enhancing Icons with Badges in Bootstrap

information not visible on the webpage

center items alignment with hidden tags

Transforming hexadecimal color codes into spans

The alignment of Material-UI Typography in AppBar appears to be off

Tips for filling the offset space with a column

Is there a way to tally up the number of green items and display a <p> tag when every item has been marked green?

Leverage CSS to manipulate image attributes

Preventing the image from being displayed when it cannot fully show is achieved through blocking the background repeat

"Trouble with getting the Twitter Bootstrap dropdown menu to function properly

Traverse an SVG element using JavaScript

What methods can I use to prevent a number from becoming negative?

How can I retrieve the selected value from an Angular 2 dropdown menu when it changes, in order to utilize it within a function?