How to align input boxes center?-CodePudding

I have difficulty trying to put the input boxes for a form in the middle of the form, they don't seem to get affected by justify-content and align-items

(This question has been asked before, but I don't use labels, so the answers don't seem to work for me)

.form_exterior{
  display: block;
  width: 80vw;
  height: fit-content;
  width: 50vw;
  background-color: #d3d3d3;
  border: solid 1px;
  border-radius: 60px;
  margin: 50px auto;
}

.grid_form{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-gap: 20px;
}

.form_title{
  display: flex;
  justify-content: center;
}

.section_button_form{
  text-align: center;
}

.form_boxes{
  display: flex;
  text-align: center;
  width: 50%;
}

<section>
      <article >
          <form >
            <section >

            <h1 >Personal Information</h1>
            <input  type="text" name="name" value="Name">
            <input  type="text" name="last name" value="Last name">
            <input  type="text" name="email" value="Email">
            <input  type="text" name="phone number" value="Phone number">

            <h1 >Shipping information</h1>
            <select  id="country" name="Select country">
              <option>select country</option>
              <option value="US">United States</option>
              <option value="UK">United Kingdom</option>
              
              <input  type="text" name="city" value="City">
              <input  type="text" name="postal code" value="Postal code">
              <input  type="text" name="street" value="Street address">
            </select>
            <section >
              <button onclick="alertForm()"  type="button" name="order_button">order</button>
              <a href="Webshop.html"><button  type="button" name="go_back_button">go back</button></a>
            </section>
        </form>
      </article>
    </section>

CodePudding user response：

You can try this, it might save your issue

.grid_form{
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: 1fr;
 grid-gap: 20px;
 justify-items : center;
}

CodePudding user response：

I believe your input boxes are block level elements and therefore are referenced to the width of their container.

You can set the width in your input element.

: The Input (Form Input) element

You could also try changing the display attribute on your input box to display: inline-block. You might need to set a min-width on those elements also.