仿YouTube教程制作的登录系统文本居右而非居中的问题求助

架构老林

2026-8-17

问题描述

跟着YouTube教程制作的登录系统功能正常，但所有文本显示为居右，和教程里的居中效果不一致，怀疑问题出在form的边框或文本定位上。

我的登录系统效果：
我的登录系统截图

教程中的效果：
教程中的登录系统截图

我的代码

HTML代码

<link href="https://fonts.googleapis.com/css2?family=Clicker+Script&family=IM+Fell+DW+Pica&family=Playfair+Display+SC:ital@1&family=Yeseva+One&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f90175d7f9.js" crossorigin="anonymous"></script>

<center>
  <div class="box">
    <div class="form">
      <h4>Log In
        <h4>
          <div class="inputBox">
            <input type="text" required="required">
            <span>Username</span>
            <i></i>
          </div>
          <div class="inputBox">
            <input type="password" required="required">
            <span>Password</span>
            <i></i>
          </div>
          <div class="loglinks">
            <a href="#">Forgot Password</a>
            <a href="#">Sign up</a>
          </div>
          <input type="submit" value="Enter">
    </div>
  </div>
</center>

CSS代码

.box {
  top: 80px;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 380px;
  height: 420px;
  background: #000000;
  border-radius: 8px;
  overflow: hidden;
}

.box::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 380px;
  height: 420px;
  background: linear-gradient(0deg, transparent, #00d8d6, #00d8d6);
  transform-origin: bottom right;
  animation: animate 6s linear infinite;
}

.box::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 380px;
  height: 420px;
  background: linear-gradient(0deg, transparent, #00d8d6, #00d8d6);
  transform-origin: bottom right;
  animation: animate 6s linear infinite;
  animation-delay: -3s;
}

@keyframes animate {
  /*colorwave line animation*/
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.form {
  position: absolute;
  inset: 3px;
  border-radius: 8px;
  background: #343745;
  z-index: 10;
  display: flex;
  flex-direction: column;
}

.form h4 {
  color: #7ed6df;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.05em;
  font-size: 3em;
  font-style: italic;
}

.inputBox {
  position: relative;
  width: 300px;
  margin-top: 35px;
}

.inputBox input {
  position: relative;
  width: 90%;
  padding: 20px 10px 10px;
  background: transparent;
  border: none;
  outline: none;
  color: #535c68;
  font-size: 0.5em;
  letter-spacing: 0.06em;
  z-index: 10;
}

.inputBox span {
  position: absolute;
  left: 0;
  padding: 20px 0px 10px;
  font-size: 0.7em;
  color: #8f8f8f;
  pointer-events: none;
  letter-spacing: 0.03em;
}

.inputBox input:valid~span,
.inputBox input:focus~span {
  color: #7ed6df;
  transform: translateX(0px) translateY(-34px);
  font-size: 0.7em
}

.inputBox i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #7ed6df;
  border-radius: 4px;
  transition: 0.5s;
  pointer-events: none;
  z-index: 9;
}

.inputBox input:valid~i,
.inputBox input:focus~i {
  height: 40px;
}

.loglinks {
  display: flex;
  justify-content: space-between;
}

.loglinks a {
  margin: 15px;
  font-size: 0.4em;
  color: #8f8f8f;
  text-decoration: none;
}

.loglinks a:hover,
.loglinks a:nth-child(2) {
  color: #7ed6df;
}

input[type="submit"] {
  border: none;
  outline: none;
  background: #7ed6df;
  padding: 11px 25px;
  width: 100px;
  margin-top: 10px;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
}

input[type="submit"]:active {
  opacity: 0.8;
}

解决方案

问题根源有两个：

HTML标签未闭合：<h4>Log In后面错误写成<h4>，正确应为</h4>，未闭合标签会打乱后续元素布局，导致文本偏移。
Flex布局缺少水平居中配置：.form使用了flex-direction: column但未添加align-items: center，内部元素默认左对齐。

同时给提交按钮和登录链接容器补充居中/宽度配置，确保整体布局和教程一致。

修改后的HTML代码

<link href="https://fonts.googleapis.com/css2?family=Clicker+Script&family=IM+Fell+DW+Pica&family=Playfair+Display+SC:ital@1&family=Yeseva+One&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f90175d7f9.js" crossorigin="anonymous"></script>

<center>
  <div class="box">
    <div class="form">
      <h4>Log In</h4>
      <div class="inputBox">
        <input type="text" required="required">
        <span>Username</span>
        <i></i>
      </div>
      <div class="inputBox">
        <input type="password" required="required">
        <span>Password</span>
        <i></i>
      </div>
      <div class="loglinks">
        <a href="#">Forgot Password</a>
        <a href="#">Sign up</a>
      </div>
      <input type="submit" value="Enter">
    </div>
  </div>
</center>

修改后的CSS代码

.box {
  top: 80px;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 380px;
  height: 420px;
  background: #000000;
  border-radius: 8px;
  overflow: hidden;
}

.box::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 380px;
  height: 420px;
  background: linear-gradient(0deg, transparent, #00d8d6, #00d8d6);
  transform-origin: bottom right;
  animation: animate 6s linear infinite;
}

.box::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 380px;
  height: 420px;
  background: linear-gradient(0deg, transparent, #00d8d6, #00d8d6);
  transform-origin: bottom right;
  animation: animate 6s linear infinite;
  animation-delay: -3s;
}

@keyframes animate {
  /*colorwave line animation*/
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.form {
  position: absolute;
  inset: 3px;
  border-radius: 8px;
  background: #343745;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center; /* 添加实现水平居中 */
}

.form h4 {
  color: #7ed6df;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.05em;
  font-size: 3em;
  font-style: italic;
}

.inputBox {
  position: relative;
  width: 300px;
  margin-top: 35px;
}

.inputBox input {
  position: relative;
  width: 90%;
  padding: 20px 10px 10px;
  background: transparent;
  border: none;
  outline: none;
  color: #535c68;
  font-size: 0.5em;
  letter-spacing: 0.06em;
  z-index: 10;
}

.inputBox span {
  position: absolute;
  left: 0;
  padding: 20px 0px 10px;
  font-size: 0.7em;
  color: #8f8f8f;
  pointer-events: none;
  letter-spacing: 0.03em;
}

.inputBox input:valid~span,
.inputBox input:focus~span {
  color: #7ed6df;
  transform: translateX(0px) translateY(-34px);
  font-size: 0.7em
}

.inputBox i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #7ed6df;
  border-radius: 4px;
  transition: 0.5s;
  pointer-events: none;
  z-index: 9;
}

.inputBox input:valid~i,
.inputBox input:focus~i {
  height: 40px;
}

.loglinks {
  display: flex;
  justify-content: space-between;
  width: 300px; /* 设置宽度确保左右链接对齐 */
}

.loglinks a {
  margin: 15px;
  font-size: 0.4em;
  color: #8f8f8f;
  text-decoration: none;
}

.loglinks a:hover,
.loglinks a:nth-child(2) {
  color: #7ed6df;
}

input[type="submit"] {
  border: none;
  outline: none;
  background: #7ed6df;
  padding: 11px 25px;
  width: 100px;
  margin: 10px auto 0; /* 修改margin实现水平居中 */
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
}

input[type="submit"]:active {
  opacity: 0.8;
}

内容的提问来源于stack exchange，提问作者Unity_User

仿YouTube教程制作的登录系统文本居右而非居中的问题求助

我的代码 #

HTML代码 #

CSS代码 #

修改后的HTML代码 #

修改后的CSS代码 #

我的代码

HTML代码

CSS代码

修改后的HTML代码

修改后的CSS代码