Problems with centering CSS

Question

Have been struggling with adding icons in input. After finally getting it the next problem occurs. Im having trouble centering the placeholder in and . I want to vertically center my text(placeholder) in input on the same as my icon. Also button doesnt want to center horizontally. would greatly appreciate your help.

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;

}

score 1 · Answer 1 · answered Jan 19 '23 at 02:19

try margin auto for the button (parent div might need to specify width)

.knop-aanvraag{
  margin-left: auto;
  margin-right: auto;
 }

and for the input, since you use padding

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;
}

top padding is 15px, right padding is 20px, bottom padding is 5x, left padding is 50px,

so the text in place holder will have less padding on the bottom than the top bottom.

Problems with centering CSS

1 Answers1