CSS to Align Label and Inputs on Form

Align labels in form next to input

While the solutions here are workable, more recent technology has made for what I think is a better solution. CSS Grid Layout allows us to structure a more elegant solution.

The CSS below provides a 2-column "settings" structure, where the first column is expected to be a right-aligned label, followed by some content in the second column. More complicated content can be presented in the second column by wrapping it in a <div>.

[As a side-note: I use CSS to add the ':' that trails each label, as this is a stylistic element - my preference.]

/* CSS */
div.settings {    display:grid;    grid-template-columns: max-content max-content;    grid-gap:5px;}div.settings label       { text-align:right; }div.settings label:after { content: ":"; }

<!-- HTML -->
<div class="settings">    <label>Label #1</label>    <input type="text" />
    <label>Long Label #2</label>    <span>Display content</span>
    <label>Label #3</label>    <input type="text" /></div>

CSS Aligning labels with inputs

The easiest way to accomplish what you want is to wrap each label and input field in a div and have the text-align: center take affect on that element. You will need to apply some style to the wrapper in order for it to behave like an inline element and have the centering work.

This approach also avoids having to specify width on any of the elements which should allow it be more flexible in case you want to display on different screen sizes.

<div class='input-wrapper'>
  <label for="email" class="formLabel">E-Mail Address</label>
  <br />
  <input type="text" name="email" value="" id="email" size="30" />
</div>

Then the style:

.input-wrapper {
  display: inline-block;
  text-align: left;
}

Here is a fiddle showing it working:
https://jsfiddle.net/ta0pesyb/

label and input don't align like I want them to

What you want:

if you want all the elements, will be in a row,
so not like display: inline but one under other.

what to do:

just add display: grid in your parent element, in this case <form>

this automatically does for you, and is also responsive!

more details:

• https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids

complete fixed code:

form {
  display: grid;
}

<form action="mailto:12100834@student.pxl.be" method="post" enctype="text/plain">
  <!-- 1 -->
  <label for="id">Identificatie:</label>
  <input type="text" id="id">

  <!-- 2 -->
  <label for="score">Score:</label>
  <input type="text" id="score">

  <!-- 3 -->
  <label for="tijdstip">Tijdstip:</label>
  <input type="radio" id="vm">
  <label for="vm">VM</label>

  <!-- 4 -->
  <input type="radio" id="nm">
  <label for="nm">NM</label>

  <!-- 5 -->
  <label for="opmerking">Opmerking:</label>
  <textarea name="opmerking" id="opmerking" cols="30" rows="5"></textarea>

  <!-- 6 -->
  <input type="submit" value="Verzenden">
</form>

How to align label and input with CSS

Add this:

p {
  display:flex;
}

Fiddle: https://jsfiddle.net/py4x7zhk/

How to align form label and input?

You seem to be using an old approach to achieving this. In the below code, I have replaced the width method with CSS grids.

There will be 4 grid columns on small devices and 8 columns on medium devices and up. Within each grid item, flex is used along with items-center to align the label and input vertically.

Note: The labels use mr-2 class to add .5rem margin to the right, so input is separated

.questions{width:50%;  text-align:right;  display:inline-block;}input{width:150px;}select{width:150px;}

<span class="questions">Your Date of birth: </span> <input type="date" placeholder="DOB"/><br><span class="questions">Which Country You Are In:</span> <select>   <option selected disabled>Select Country</option>  <option>India</option> </select><br><span class="questions">In which University You Are In:</span> <select>   <option selected disabled>Select University</option>  <option>AKTU</option> </select><br><span class="questions">In which College You Are In:</span> <select>   <option selected disabled>Select Your College</option>  <option>Raj kumar Goel Institute of Technology, Ghaziabad (RKGIT)</option> </select><br><span class="questions">Your Mobile Number: </span> <input type="tel" placeholder="Mobile Number"/><br><div align="center"> <button class="btn">Proceed to Feeds.</button><div>

form {
  display: table;
  border-spacing: 5px;
}

form>div {
  display: table-row;
}

label {
  display: table-cell;
  text-align: right;
}

input[type=checkbox] {
  vertical-align: bottom;
  margin-left:0;
}

<form>
  <div>
    <label>Name: </label>
    <input type="text">
  </div>

  <div>
    <label>Mileage: </label>
    <input type="number">
  </div>

  <div>
    <label>Track: </label>
    <input type="checkbox">
  </div>
</form>

.fieldHeading {  width: 50px;}.fieldSpan {  overflow: hidden;}#field1 {  width: 150px;}/*flexbox approach.* height and background added for clarity.*/
#form {  height: 100px;  background: #bada55;  display: flex;  align-items: center;}

<div id="form">  <label for="field1" class="fieldHeading">Name </label>  <span class="fieldSpan"><input type="text" id="field1" value="default name" /></span></div>