CSS: How to Align Vertically a "Label" and "Input" Inside a "Div"

CSS: How to align vertically a label and input inside a div?

div {    display: table-cell;    vertical-align: middle;    height: 50px;    border: 1px solid red;}

<div>    <label for='name'>Name:</label>    <input type='text' id='name' /></div>

Vertically align label with input

If I get this right, You want the label and the input to vertically center align W.R.T each other and not the page. For that, there are couple of ways.

The Flexbox Way

If you want to use something new from the CSS world and be future ready, use flexbox. Example -

.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>

How do I vertically align an input in a DIV

Use diplay: flex

https://codepen.io/Czeran/pen/mMWNwP

.loginbar {
    width: 800px;
    height: 400px;
    box-sizing: border-box;
    margin: auto auto;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px black;
    color: orange;
    margin-top: 200px;
}

Vertically center input inside a div

You can do this in two ways using display:flex or using display:table,display:table-row and display:table-cell which you need to wrap in another div.

Using display:flex is better in which you no need to wrap template in another div

Add the class color for all the color divs

Style of 'color' class

.color{
   height:33%;
   display: flex;
   justify-content: center;
   align-items:center;
}

For more info refer this https://css-tricks.com/snippets/css/a-guide-to-flexbox/

How to align vertically input field text and checkbox?

As Bootstrap 4 documentation. Seen here https://getbootstrap.com/docs/4.0/utilities/flex/
you can use class="d-flex align-items-center".
I added style="border: 1px solid black; height:200px;" to demonstrate.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="form-row d-flex align-items-center" style="border: 1px solid black; height:200px;">  <div class="form-group col-6">    <label for="Addr">Address:</label>    <input class="form-control" type="text" name="Addr" id="Addr" value="" placeholder="Enter Physical Address" maxlength="40">  </div>  <div class="form-group col-6 ">    <div class="custom-control custom-checkbox ">      <input class="custom-control-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">      <label class="custom-control-label" for="sameAddress">check this box if mailing address is the same as physical address</label>    </div>  </div></div>

---

Related Topics