Question 329371 in Html Question posted in
Some basic documentation can be found here.

Html – How to justify a label next to the input field?

enter image description here
As in, in this image, the labels are slightly above to the input text fields. I want them to justify.

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<title>REGISTRATION FORM</title>

<link rel="icon" type="image/x-icon" href="C:UsersquadiOneDriveDocumentsDesktopiwpclass3rdsemassignmentm-favicon3.png">

input {

border: 1px solid black;

border-top: 3px solid grey;

border-left: 3px solid grey;

margin: 5px 4px;

float:left;

}

label {

width: 200px;

float: left;

text-align: right;

}

<b>Registration Form</b>

 <label for="uname">Username</label>

 <input type="text" id="uname" name="uname"><br>

 <label for="pwd">Password</label>

 <input type="password" id="pwd" name="pwd"><br>

 <label for="cpwd">Confirm Password</label>

 <input type="password" id="cpwd" name="cpwd">
Tags:

3

Answers


  1. 0 
    label {
  display: inline-block;
  width: 150px;
  /* Set a width that accommodates your longest label */
  text-align: right;
  margin: 5px 10px 5px 0;
  /* Adjust the right margin to space out the label from the input */
}

input {
  border: 1px solid black;
  border-top: 3px solid grey;
  border-left: 3px solid grey;
  margin: 5px 0;
  /* Adjust the top and bottom margin as needed */
  display: inline-block;
  width: 200px;
  /* Set a width that works for your layout */
}
    <div>
  <label for="uname">Username</label>
  <input type="text" id="uname" name="uname">
</div>

<div>
  <label for="pwd">Password</label>
  <input type="password" id="pwd" name="pwd">
</div>

<div>
  <label for="cpwd">Confirm Password</label>
  <input type="password" id="cpwd" name="cpwd">
</div>

    remove the float: left; style from both elements as it’s not necessary when using inline-block. always Enclosing each label and input pair in a div helps to ensure that each pair is treated as a block and its a good practice

    Login or Signup to reply.
  2. 0

    Just wrap every label & input in a separate span tag or div tag and then in css give this span tag display:flex and align-items:center; to vertically center them

    span{
  display:flex;
  align-items:center;
}
input { 
  border: 1px solid black; 
  border-top: 3px solid grey;
  border-left: 3px solid grey;
  margin: 5px 4px;
  float:left;
}
label { 
  width: 200px;
  float: left;
  text-align: right;
}
    <b>Registration Form</b>
<span>
   <label for="uname">Username</label>
   <input type="text" id="uname" name="uname">
</span>
<br>
<span>
   <label for="pwd">Password</label>
   <input type="password" id="pwd" name="pwd">
</span>
<br>
<span>
   <label for="cpwd">Confirm Password</label>
   <input type="password" id="cpwd" name="cpwd">
</span>
    Login or Signup to reply.
  3. 0

    You should use inline-block property for label, like this:

    div.register input { 
  border: 1px solid black; 
  border-top: 3px solid grey; 
  border-left: 3px solid grey; 
  margin: 0px 4px; /* top margin removed */
  display: inline-block; 
} 

div.register label { 
  width: 200px;
  text-align: right; 
}
    <div class="register">
 <label for="uname">Username</label>

 <input type="text" id="uname" name="uname"><br>

 <label for="pwd">Password</label>

 <input type="password" id="pwd" name="pwd"><br>

 <label for="cpwd">Confirm Password</label>

 <input type="password" id="cpwd" name="cpwd">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search