CODEWITHSUNDEEP
htmlcss
The Codesee
The Codesee

Reputation: 3783

Horizontally align two side-by-side input elements underneath two input elements

I have centered two input elements on top of each other inside a div and am attempting to place two submit elements under them.

Here is what I would like the outcome to be:

enter image description here

Instead, the two submit buttons aren't perfectly aligned with the input elements (I believe this is to do with float: left;:

input[type="text"] {
 margin: 0 auto;
 width: 70%;
 display: block;
}

input[type="submit"] {
 margin: 0 auto;
 width: 35%;
 display: block;
 float: left;
}
<input type="text">
<br>
<input type="text">
<br>
<input type="submit">
<input type="submit">

Upvotes: 1

Views: 2634

Answers (4)

maryam f
maryam f

Reputation: 1

One of the easiest way to solve this problem is using Grid Layout in your CSS codes. you can learn about it on the below link:

https://www.w3schools.com/css/css_grid.asp

Upvotes: 0

Dekel
Dekel

Reputation: 62556

There are several ways to solve this.

This is one of them:

div.container {
  width: 70%;
}
input[type="text"] {
 margin: 0 auto;
 width: 100%;
 display: block;
}

input[type="submit"] {
 margin: 0 auto;
 width: 50%;
 display: block;
 float: left;
}
<div class="container">
<input type="text">
<br>
<input type="text">
<br>
<input type="submit">
<input type="submit">
</div>

Upvotes: 0

Jhecht
Jhecht

Reputation: 4435

There might be another way to do it, but the easiest way I know of is to wrap those two elements in a parent element and simply apply the same margin/width

input[type="text"] {
  margin: 0 auto;
  width: 70%;
  display: block;
}
input[type="submit"] {
  width: 50%;
  display: block;
  float: left;
}
.center-70 {
  margin: 0 auto;
  width: 70%;
}
<input type="text">
<br>
<input type="text">
<br>
<div class="center-70">
  <input type="submit">
  <input type="submit">
</div>

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122047

Remove float and set text-align: center on parent element.

body {
  text-align: center;
}
input[type="text"] {
  margin: 0 auto;
  width: 70%;
  display: block;
}
input[type="submit"] {
  margin: 0 auto;
  width: 35%;
}
<input type="text">
<br>
<input type="text">
<br>
<input type="submit">
<input type="submit">

Upvotes: 2

Related Questions