css - Tailwind 将元素对齐到父级的底部

Question

我花了将近一天的时间来尝试构建这个用户界面。

我只是无法将中间的 div 放在屏幕中央，而最后一个 版权 div 与屏幕底部对齐。我首先是一名移动开发人员，刚刚开始在网络上进行样式设计。这是我到目前为止所成功构建的，忽略 UI 的其余部分，我可以完成该部分。这也是我的代码的沙箱:https://codesandbox.io/s/tailwind-css-and-react-forked-v9c22d?file=/src/App.js:140-2801

<div className="bg-background-light dark:bg-background-dark h-screen w-full">
      <div>
        <img
          src="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a"
          className="h-24 w-24 mt-9 ml-9"
        />
        <div className="flex justify-center items-center h-fit">
          <div className="flex flex-col items-start">
            <div className="text-4xl text-black">Admin Dashboard</div>
            <div className="text-login-subtitle-light dark:text-login-subtitle-dark mt-6">
              Enter your email and password to sign in
            </div>
            <label className="dark:text-white text-text-color-primary-light mt-6">
              Email
            </label>
            <input
              placeholder="Email"
              className="w-full rounded font-thin px-5 py-3 mt-4"
              autoFocus
              type="email"
              required
            />
            <label className="dark:text-white text-text-color-primary-light mt-6">
              Password
            </label>
            <input
              placeholder="Password"
              id="password"
              className="w-full rounded font-thin px-5 py-3 mt-4"
              autoFocus
              type="password"
              required
            />
            <label
              for="default-toggle"
              class="inline-flex relative items-center cursor-pointer"
            >
              <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 mb-5"></div>
              <input
                type="checkbox"
                value=""
                id="red-toggle"
                class="sr-only peer"
                checked
              />
              <span class="ml-3 text-sm font-medium text-text-color-primary-light dark:text-white mb-5">
                Remember me
              </span>
            </label>
            <button
              className="text-white bg-red-900 h-16 rounded-xl w-full text-xl"
              type="submit"
            >
              Sign In
            </button>
            <div className="text-black dark:text-white">
              © Example Technologies Pvt. Ltd.
            </div>
          </div>
        </div>
      </div>
    </div>

问题突出显示，您可以看到图像结束后第二个 div 就开始

添加代码后，当我滚动时，当我们向 版权 View 添加底部填充时，当我打开控制台时，它会创建一个白色背景，是这是预期的行为吗？

Answer 1

您需要设置 Logo 和版权绝对。版权可以用bottom-0 left-0 right-0粘在底部和左右两侧，用text-center将文本居中。

然后，您需要将 flex 添加到父 div，然后将 m-auto 添加到带有字段的 div。这将使 div 在页面上水平和垂直居中(在主 div 中)。我还为其设置了背景，以便您可以看到 div，但这并不是必然原因。

这是代码:

import React from "react";
import "./styles.css";
import "./styles/tailwind-pre-build.css";

export default function App() {
  return (
    <div className="relative flex bg-background-light dark:bg-background-dark h-screen w-full">
      <img
        src="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a"
        className="absolute h-24 w-24 mt-9 ml-9"
      />
      <div className="m-auto bg-gray-500 rounded-lg p-8">
        <div className="flex justify-center items-center h-fit">
          <div className="flex flex-col items-start">
            <div className="text-4xl text-black">Admin Dashboard</div>
            <div className="text-login-subtitle-light dark:text-login-subtitle-dark mt-6">
              Enter your email and password to sign in
            </div>
            <label className="dark:text-white text-text-color-primary-light mt-6">
              Email
            </label>
            <input
              placeholder="Email"
              className="w-full rounded font-thin px-5 py-3 mt-4"
              autoFocus
              type="email"
              required
            />
            <label className="dark:text-white text-text-color-primary-light mt-6">
              Password
            </label>
            <input
              placeholder="Password"
              id="password"
              className="w-full rounded font-thin px-5 py-3 mt-4"
              autoFocus
              type="password"
              required
            />
            <label
              for="default-toggle"
              class="inline-flex relative items-center cursor-pointer"
            >
              <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 mb-5"></div>
              <input
                type="checkbox"
                value=""
                id="red-toggle"
                class="sr-only peer"
                checked
              />
              <span class="ml-3 text-sm font-medium text-text-color-primary-light dark:text-white mb-5">
                Remember me
              </span>
            </label>
            <button
              className="text-white bg-red-900 h-16 rounded-xl w-full text-xl"
              type="submit"
            >
              Sign In
            </button>
          </div>
        </div>
      </div>
      <div className="absolute bottom-0 left-0 right-0 text-center text-black dark:text-white">
        © Example Technologies Pvt. Ltd.
      </div>
    </div>
  );
}