html - 如何使输入栏上覆盖一个图标响应，垂直居中它所在的形式？

Question

我有两个带有图标的输入栏，它们位于左侧居中的表单内，该表单也是水平居中的。不幸的是，水平缩小页面会导致占位符文本和图标相互交叉，而且我仍然没有设法使表单垂直居中。我该如何解决这两个问题？

.body-color{
    background-color: rgb(30,94,255);
}


.signup-form{
    text-align: center;
    margin: auto;
    margin-top: 5%;
    width: 50vw;
    height: fit-content;
    border-radius: 15px;
    background-color: white;
    box-shadow: 0 0 15pt 2pt black;
}

input{
    width: 75%;
    margin-top: 20px;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 20px;
    border: 0; 
    box-shadow: 0 0 15pt 2pt #D3D3D3;
    outline: 0;
    text-indent: 35px;
}

.input-container{
    position: relative;
}

i{
    position: absolute;
    font-size: 25px;
    top: 30px;
    left: 75px;
 }

<form class="signup-form">
     <div class="input-container">
         <i class="bi bi-person-circle"></i>
         <input type="text" required placeholder="Username"/> 
     </div>
     <div class="input-container">
         <i class="bi bi-lock"></i>
         <input type="password" required placeholder="Password"/> 
     </div>
 </form>

Answer 1

我认为它对你有用。解决方案是将 padding 添加到 .signup-form 并将 width 更改为 100%。

* {
  
}

.body-color {
  background-color: rgb(30, 94, 255);
}

.signup-form {
  text-align: center;
  margin: auto;
  margin-top: 5%;
  width: 50vw;
  height: fit-content;
  border-radius: 15px;
  background-color: white;
  box-shadow: 0 0 15pt 2pt black;
  padding: 15px 25px; /* New line */
}

input {
  width: 100%; /* Changed */
  margin-top: 20px;
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 20px;
  border: 0;
  box-shadow: 0 0 15pt 2pt #d3d3d3;
  outline: 0;
  text-indent: 35px;
  box-sizing: border-box; /* New line */
}

.input-container {
  position: relative;
}

i {
  position: absolute;
  font-size: 16px; /* Changed */
  top: 30px;
  left: 17px; /* Changed */
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<form class="signup-form">
  <div class="input-container">
    <i class="bi bi-person-circle"></i>
    <input type="text" required placeholder="Username" />
  </div>
  <div class="input-container">
    <i class="bi bi-lock"></i>
    <input type="password" required placeholder="Password" />
  </div>
</form>