How to align input field with button in CSS and HTML?

Question

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: blueviolet;
}

.welcome_text {
  width: 500px;
}

.welcome_form input,
.welcome_form button {
  display: block;
  width: 100%;
}

.welcome_form input {
  margin-bottom: 15px;
  padding: 100px;
}

<div class="wrapper">
  <div class="welcome_text">
    <form class="welcome_form">
      <input type="text">
      <button type="submit">Start Quiz</button>
    </form>
  </div>
</div>

You can clearly see that I have defined welcome_text to have a width of 500px But the render is not aligned (see the screenshot) and the effect is multiplied if I am using padding on the input box.

How can I solve this issue?

What do you mean by "aligned"? They are currently aligned, on their left sides. — Heretic Monkey
– Heretic Monkey, Commented Jun 11, 2021 at 14:27
Please be aware that browsers apply default CSS to elements. You might want to add a CSS reset at the top: * { margin: 0; padding: 0; }. This also means you have to style every HTML element. Suggestion: Use a CSS framework instead. — Peter Pointer
– Peter Pointer, Commented Jun 11, 2021 at 14:31

Manish Khatri · Accepted Answer · 2021-06-11 14:47:11Z

1

Right now, whatever padding you are adding to input is also getting added in it's 100% widht i.e. 500px. So in your case the total width is 500px + 100px(left side) + 100px(right side) + 2px of border around the input. To fix this use refer to the code below :

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: blueviolet;
}

.welcome_text {
  width: 500px;
}

.welcome_form input,
.welcome_form button {
  display: block;
  width: 100%;
}

.welcome_form input {
  margin-bottom: 15px;
  padding: 100px;
  width: calc(100% - 200px);
  border:0;
}

<div class="wrapper">
  <div class="welcome_text">
    <form class="welcome_form">
      <input type="text">
      <button type="submit">Start Quiz</button>
    </form>
  </div>
</div>

answered Jun 11, 2021 at 14:47

Manish Khatri

1617 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TechySharnav · Accepted Answer · 2021-06-11 14:26:28Z

1

You can display: flex; on .welcome_form and center the input and button, using other properties.

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: blueviolet;
}

.welcome_text {
  width: 500px;
}

.welcome_form{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
}

.welcome_form input,
.welcome_form button {
  display: block;
  width: 100%;
}

.welcome_form input {
  margin-bottom: 15px;
  padding: 100px;
}

<div class="wrapper">
  <div class="welcome_text">
    <form class="welcome_form">
      <input type="text">
      <button type="submit">Start Quiz</button>
    </form>
  </div>
</div>

answered Jun 11, 2021 at 14:26

TechySharnav

5,1142 gold badges13 silver badges29 bronze badges

1 Comment

Ali Borjian Over a year ago

flex-direction: column; is the clue

Collectives™ on Stack Overflow

How to align input field with button in CSS and HTML?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related