CODEWITHSUNDEEP
htmlcss
Pritam
Pritam

Reputation: 97

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

.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. Screenshot with padding on, in the input field

How can I solve this issue?

Upvotes: 0

Views: 679

Answers (2)

Manish Khatri
Manish Khatri

Reputation: 161

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>

Upvotes: 1

TechySharnav
TechySharnav

Reputation: 5084

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>

Upvotes: 1

Related Questions