我如何使一个图标覆盖在它响应的输入栏，垂直中心的形式?

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>