如何制作一個帶有圖標的輸入欄響應式，垂直居中它所在的表單？

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

我認為這對你有用。 解決方案是向.signup-form添加padding並將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>