How to center inputs in a form with labels on the same line

Question

I have a page with a form, some labels and inputs.

The design calls for the "inputs" to be centered in the page. The labels are inline with the inputs and right-aligned.

Note: the labels are not included in the centering, they float to the right. See example below.

Here is what I have for the layout.

.input-wrap {
  margin-bottom: 22px;
}

.label {
  display: inline-block;
  width: 102px;
  text-align: right;
  font-size: 20px;
  margin-right: 15px;
}

.input {
  width: 172px;
  height: 30px;
  font-size: 20px;
  border: 1px solid $black;
}

form {
  position: relative;
  margin: 0 auto;
  margin-top: 44px;
}

h1 {
  text-align: center;
 }
  

<h1>Inputs should be centered</h1>

<form action="/" method="post">

  <div class="input-wrap">
    <label for="name" class="label">your name</label>
    <input type="text" id="name" name="name" class="input">
  </div>

  <div class="input-wrap">
    <label for="email" class="label">email</label>
    <input type="email" id="email" name="email" class="input">
  </div>

</form

Answer 1

You can do it with the Flexbox / positioning combination:

.input-wrap {
  position: relative; /* needs to be set on the parent element */
  margin-bottom: 22px;
}

.label {
  position: absolute; /* positioned relative to the parent element; taken out of the normal document flow */
  left: -117px; /* moved left by negative 102px (width) + 15px (margin-right) because the default value is 0 */
  display: inline-block;
  width: 102px;
  text-align: right;
  font-size: 20px;
  /*margin-right: 15px; not necessary anymore, i.e. has no affect on label elements*/
}

.input {
  width: 172px;
  height: 30px;
  font-size: 20px;
  border: 1px solid $black;
}

form {
  display: flex; /* displays children (divs) inline by default thats why you need to change its direction */
  flex-direction: column; /* stacks children vertically */
  align-items: center; /* horizontal alignment / centering / affects only input elements since label elements are taken out of the normal document flow */
  position: relative;
  margin: 0 auto;
  margin-top: 44px;
}

h1 {
  text-align: center;
}

<h1>Inputs should be centered</h1>

<form action="/" method="post">

  <div class="input-wrap">
    <label for="name" class="label">your name</label>
    <input type="text" id="name" name="name" class="input">
  </div>
  
  <div class="input-wrap">
    <label for="email" class="label">email</label>
    <input type="email" id="email" name="email" class="input">
  </div>
  
</form>

Answer 2

An alternate to the solution using flexbox would be to set a width on your form and make your label and input widths percentage based. The following will work for all screen sizes whereas the flexbox solution will only work on screens larger than ~400px, anything smaller than that will begin to cut off the label text.

.input-wrap {
  margin-bottom: 22px;
}

.label {
  display: inline-block;
  width: 100%;
  font-size: 20px;
  margin-right: 16px;
  margin-bottom: 8px;
}

.input {
  width: 100%;
  height: 30px;
  font-size: 20px;
  border: 1px solid $black;
}

form {
  position: relative;
  margin: 0 auto;
  margin-top: 44px;
}

h1 {
  text-align: center;
}

form {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
}

@media screen and (min-width: 600px) {
  .label {
    width: 30%;
    text-align: right;
  }
  .input {
    width: 40%;
  }
}

<h1>Inputs should be centered</h1>

<form action="/" method="post">
  <div class="input-wrap">
    <label for="name" class="label">your name</label>
    <input type="text" id="name" name="name" class="input">
  </div>

  <div class="input-wrap">
    <label for="email" class="label">email</label>
    <input type="email" id="email" name="email" class="input">
  </div>
</form>

Answer 3

.input-wrap {
        width: fit-content;
        height: fit-content;
        margin: 0 auto;
        margin-bottom: 22px;}

Answer 4

Try this one:

<form action="/" method="post">

 <center>
   <div class="input-wrap">
     <label for="name" class="label">your name</label>
     <input type="text" id="name" name="name" class="input">
   </div>

   <div class="input-wrap">
     <label for="email" class="label">email</label>
     <input type="email" id="email" name="email" class="input">
   </div>
 </center>

</form>

Or you can center a div using this css code:

.input-wrap {
  display: inline-block;
  text-align: center;
  position: relative;
  margin: 0 auto;
}