如何在包装盒上方放置文字？

问题描述 投票：0回答：2

我已经按照 YouTube 上的教程制作了一个简单的登录表单，但我想自己添加一些东西。

我想在登录表单上方添加“欢迎”文本，并尝试使用 

h1
，但文本出现在框的左侧而不是上方。这是我希望如何使其更容易理解的图片：

这是我的代码：

@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/[email protected]/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
2个回答
0
投票

原因是 

.wrapper
容器位于 
flex
容器，即 
<body>
内。这样它就会居中。但因为它也以水平轴为中心，所以当您在其前面添加一个项目时，它们就会彼此并排。

为了解决这个问题，我添加了一个元素来包裹 

h1
和 
.wrapper
，这样 
<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 {
  /* 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/[email protected]/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>

0
投票

*要将文本放在 HTML 中的包装框上方，您可以使用该元素为文本和包装框创建一个容器。这是一个

<!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; /* Align the text in the center */
        }

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

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

示例：强调文字*

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.