Как разместить текст над полем-оберткой?

Я просмотрел урок на 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>

Пожалуйста, добавьте свой код в вопрос. Не зная, каков ваш текущий код, очень сложно понять, как помочь. При этом, если h1 появляется слева от поля, то, вероятно, он центрирован с помощью flex, поэтому попробуйте добавить стиль flex-direction: column к элементу-обертке.

— 16.04.2024 06:07

о да, мне очень жаль, что я забыл, я уже это написал. Спасибо

— 16.04.2024 06:30

html css

16.04.2024 05:53

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Причина в том, что контейнер .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>

16.04.2024 07:17

*Чтобы поместить текст над полем-оболочкой в 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>

пример:выделенный текст*

ОП использует гибкость, как видно из опубликованного фрагмента и другого ответа

— 16.04.2024 07:24

Как сейчас написано, ваш ответ неясен. Пожалуйста, отредактируйте , чтобы добавить дополнительную информацию, которая поможет другим понять, как это относится к заданному вопросу. Более подробную информацию о том, как писать хорошие ответы, вы можете найти в справочном центре.

— 17.04.2024 10:06

16.04.2024 07:21