顺风对齐元件到母体底部

Question

我已经尝试构建这个UI将近一天了。

​

我只是不能让中间的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在图像结束后立即启动。

​

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

​

Answer 1

您需要设置徽标和版权absolute。版权可以用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>
  );
}