Центрируйте ввод с помощью Flexbox в Tailwind CSS

Я пытался создать клон целевой страницы Netflix, используя HTML и Tailwind CSS. Я хотел создать поле ввода и кнопку в разделе «Герой», и я попытался центрировать их, используя flex box, flex-col, justify-center и items-center в родительском div.

Проблема в том, что центрируется только кнопка, а элемент ввода остается прежним.

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <title>Netflix India</title>
  <link rel = "stylesheet" href = "/main.css">
  
  <link rel = "preconnect" href = "https://fonts.googleapis.com">
  <link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin>
  <link href = "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel = "stylesheet">
  <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" />
</head>
<body class = "font-['Poppins']">
  <header class = "relative bg-[url('assets/images/bg.jpg')] h-[70vh] bg-no-repeat bg-center">
    <nav class = "flex align-middle justify-between pt-5 px-5">
      <span class = "z-20">
        <img class = "w-32" src = "assets/images/logo.svg" alt = "">
        </span>
      <div class = "z-20">
        <button class = "text-white text-sm rounded border border-gray-500 border-solid py-1.5 px-3">
         English
          </button>
        <button class = "text-white bg-[#e50914] py-1.5 text-sm px-3 rounded">Sign In</button>
      </div>
    </nav>
    <div class = "absolute top-0 left-0 right-0 h-[70vh] w-full opacity-60 bg-black">
      
    </div>
    <div class = "h-[60%] w-[100%] flex flex-col text-center justify-center text-white px-8">
      <span class = "z-20 text-[28px] font-bold mb-5">
        Unlimited movies, TV shows and more
      </span>
      <span class = "z-20 text-lg mb-5">
        Watch anywhere. Cancel anytime.
      </span>
      <span class = "z-20 text-md">
        Ready to watch? Enter your email to create or restart your membership.
      </span>
    </div>
    <div class = "w-full text-white flex flex-col justify-center align-middle">
      <input type = "text" placeholder = "Email Address" class = "w-[70%]">
      <button>Get Started ></button>
    </div>
  </header>
  <script src = "main.js"></script>
</body>
</html>

Пожалуйста, помогите мне расположить элемент ввода в центре.

когда изгиб направлен в направлении столбца, justify-center выравнивается по вертикали, а не по горизонтали, добавьте класс items-center, и все будет хорошо.

— 28.03.2024 20:52

html css tailwind-css

28.03.2024 18:14

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

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

Ответы 1

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

Вам нужно добавить родительский элемент шириной 100%:

<div class = "relative z-[2] flex w-full flex-col justify-center align-middle text-white">
  <div class = "flex w-full flex-col items-center justify-center">
    <input type = "text" placeholder = "Email Address" class = "w-[70%]" />
    <button class = "text-white">Get Started ></button>
  </div>
</div>

Вот, это должно сработать для вас:

<header class = "relative h-[70vh] bg-[url('assets/images/bg.jpg')] bg-center bg-no-repeat">
  <nav class = "flex justify-between px-5 pt-5 align-middle">
    <span class = "z-20">
      <img class = "w-32" src = "assets/images/logo.svg" alt = "" />
    </span>
    <div class = "z-20">
      <button class = "rounded border border-solid border-gray-500 px-3 py-1.5 text-sm text-white">
        English
      </button>
      <button class = "rounded bg-[#e50914] px-3 py-1.5 text-sm text-white">
        Sign In
      </button>
    </div>
  </nav>
  <div class = "absolute left-0 right-0 top-0 z-[1] h-[70vh] w-full bg-black opacity-60"></div>
  <div class = "relative z-[2] flex h-[60%] w-[100%] flex-col justify-center px-8 text-center text-white">
    <span class = "z-20 mb-5 text-[28px] font-bold">
      {" "}
      Unlimited movies, TV shows and more{" "}
    </span>
    <span class = "z-20 mb-5 text-lg"> Watch anywhere. Cancel anytime. </span>
    <span class = "text-md z-20">
      {" "}
      Ready to watch? Enter your email to create or restart your membership.{" "}
    </span>
  </div>

  <div class = "relative z-[2] flex w-full flex-col justify-center align-middle text-white">
    <div class = "flex w-full flex-col items-center justify-center">
      <input type = "text" placeholder = "Email Address" class = "w-[70%]" />
      <button class = "text-white">Get Started ></button>
    </div>
  </div>
</header>

✌ приятного обучения!

— 29.03.2024 08:24

28.03.2024 21:27