• • 此问题在此处已有答案**：

（133个答案）
2天前关闭。
一直在努力在输入中添加图标。终于得到它后，下一个问题发生了。我有麻烦的中心占位符和。我想垂直中心我的文本（占位符）在输入上一样，我的图标。也按钮不想水平中心。将非常感谢您的帮助。
how it looks now

\<div class="form-outer"\>
\<div class="container"\>

              <form class="form">
                
                <div class="form-input">
                  <span class="icon"><i class="fa fa-envelope" aria-hidden="true"></i></span>
                  <input type="email" name="email" placeholder="Enter your email">
                </div>
                <div class="form-input">
                  <span class="icon"><i class="fa fa-lock" aria-hidden="true"></i></span>
                  <input type="password" name="password" placeholder="Enter your password">
                </div>
                <button type="submit" class="knop-aanvraag">Aanvragen</button>
              </form>
            </div>
            
          </div>


.knop-aanvraag{
background-color: #ffc350;
margin-top: 40px;
box-shadow: 0 10px 20px -18px #333333;
border: none;
height: 53px;
width: 244px;
font-size: 32px;
font-weight:500;
color: #FFFFFF;
text-align: center;
border-radius: 12px;

}

.form-outer {
position: absolute;
top: 17%;
right: 22%;
width: 100%;

}
.container {
width: 336px;
height: 578px;
background-color: #C9003A;
float: right;
padding-top: 10px;
box-shadow: 0 0 9px 2px #333333;

}
.form-input {
margin-top: 10px;
position: relative;
display: flex;
align-items: center;
justify-content: center;

}
input {
outline: none;
padding: 15px 20px 5px 50px;
font-size: 20px;
width: 70%;
background-color: rgba(170,6,53,255);
border: transparent;
font-family: 'Roboto', sans-serif;

}
.icon {
position: absolute;
left: 25px;
top: 0;
font-size: 20px;
color: #FFFFFF;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Roboto', sans-serif;

}