CSS Label Text Right Below Input Element

CSS label text right below input element

A quickly whipped up example that works:

input {  display: inline-block;  width: 6em;  position: relative;  top: -3em;}
label {  display: inline-block;  width: 6em;  margin-right: .5em;  padding-top: 1.5em;}

<form id="sg1">  <label>member 1 <input name="member1" id="member1" value="jack" /></label>  <label>member 2 <input name="member2" id="member2" value="carter" /></label>  <label>member 3 <input name="member3" id="member3" value="jackson" /></label>  <label>member 4 <input name="member4" id="member4" value="tielk" /></label></form>

Aligning labels below text input

Try this,

<style>
    span{
        display: inline-block;
    }

    span select input { 
        display: block; 
        position: relative; 
        top: -3em; 
    } 
    span input { text-align:center;}
    span label { 
        display: block; 
        position: relative; 
        top:3em;
        text-align: center;
    } 
</style>

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>

How to make label and input appear on the same line on an HTML form?

Assuming you want to float the elements, you would also have to float the label elements too.

Something like this would work:

label {
    /* Other styling... */
    text-align: right;
    clear: both;
    float:left;
    margin-right:15px;
}

#form {    background-color: #FFF;    height: 600px;    width: 600px;    margin-right: auto;    margin-left: auto;    margin-top: 0px;    border-top-left-radius: 10px;    border-top-right-radius: 10px;    padding: 0px;    text-align:center;}label {    font-family: Georgia, "Times New Roman", Times, serif;    font-size: 18px;    color: #333;    height: 20px;    width: 200px;    margin-top: 10px;    margin-left: 10px;    text-align: right;    clear: both;    float:left;    margin-right:15px;}input {    height: 20px;    width: 300px;    border: 1px solid #000;    margin-top: 10px;    float: left;}input[type=button] {    float:none;}

<div id="form">    <form action="" method="post" name="registration" class="register">        <fieldset>            <label for="Student">Name:</label>            <input name="Student" id="Student" />            <label for="Matric_no">Matric number:</label>            <input name="Matric_no" id="Matric_no" />            <label for="Email">Email:</label>            <input name="Email" id="Email" />            <label for="Username">Username:</label>            <input name="Username" id="Username" />            <label for="Password">Password:</label>            <input name="Password" id="Password" type="password" />            <input name="regbutton" type="button" class="button" value="Register" />        </fieldset>    </form></div>

In-Field Labels Don't Line Up With Input Text

It's possible to do this using almost 100% CSS and avoid all the layout flow issues caused by position: absolute;

jsFiddle demo

The trick is to wrap the LABEL around the text and INPUT element. Put the text inside of an element that can be given display: inline-block; margin-right: -100%;. This puts the text directly under the INPUT, which is given a transparent background so the text is visible through the INPUT.

Some Javascript is necessary to make the INPUT background opaque when the field has user input. There's no way around this at the moment… CSS can't "detect" a non-empty INPUT element.

Label is displayed below the input textbox

Floating an element makes it a block, which triggers a new line before it.

You would need to float the input left too.

Labels under inputs inline with other text

I think I've understood what you're trying to ask. You need to wrap the label and input in a div so that the label can be positioned off of the input tag.

.label-under {  position: relative;  display: inline;}
.label-under label {  position: absolute;  left: 0px;  top: 10px;}
span {  line-height: 2.5;}

<span style='display: inline-block;' >You will arrive on: <div class="label-under"><input type='text' ><label>(Date)</label></div> at <div class="label-under"><input type='text' ><label>(Time)</label></div>, please bring all documents with you.</span>

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>

CSS for label under input

The issue is, that you declared display: inline-flex for .scale-weight and as such use flexbox with the default flex-direction: row Just remove the class selector from the list where you declare flexbox on it. After that you can align the text of the label with text-align: center;

.scale-options {
  margin-top: 56px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
}

.scale-yes,
.scale-no /* , *//* removed */
/* .scale-weight *//* removed */ {
  display: inline-flex;
  justify-content: center;
}

.scale-yes,
.scale-no 
 {
  width: 313px;
}

.scale-weight input {
  width: 233px;
  display: block;
}

.scale-weight label {
  text-transform: uppercase;
  display: block;
  /* position: relative; *//* removed as it doesn't do anything and has no absolute child */
  text-align: center; /* added */
}

<div class="scale-options">
  <div class="scale-yes">
    <Button>yes</Button>
  </div>
  <div class="scale-weight">
    <input type="text" name="scaleWeight" value="24.5kg" disabled>
    <label for="scaleWeight" class="scale-weight-label">12.5</label>
  </div>
  <div class="scale-no">
    <Button>no</Button>
  </div>
</div>

CSS Label Text Right Below Input Element