I want the div which I use as border to be vertically centered. But it looks like the div is going upwards
<label> Application </label> <input type="text" style="width:10%; bottom:20px;">
<div style="width:1px; height:20px; background-color:grey;display: inline-block"></div> <label> Iteration </label> <input type="text" style="width:10%">
Use vertical-align: middle; to align vertically.
<label> Application </label> <input type="text" style="width:10%; bottom:20px;"> <div style="width:1px; height:20px; background-color:grey;display: inline-block;vertical-align: middle;"></div> <label> Iteration </label> <input type="text" style="width:10%">
You can use vertical-align: middle.
But better practice to draw the separator line using borders- see sample snippet below.
Check and let me know your feedback on this. Thanks!
.left-border {
border-left: 1px solid grey;
padding-left: 5px;
}
<label>Application</label>
<input type="text" style="width:10%; bottom:20px;">
<label class="left-border">Iteration</label>
<input type="text" style="width:10%">
<label> Application </label> <input type="text" style="width:10%; bottom:20px;"> <div style="width:1px; height:20px; background-color:grey;display: inline-block; vertical-align:bottom;"></div> <label>Iteration</label> <input type="text" style="width:10%">
<label> Application </label> <input type="text" style="width:10%; bottom:20px;">
<div style="width:1px; height:20px; background-color:grey;margin:-5px 0px;display: inline-block"></div>
<label> Iteration </label> <input type="text" style="width:10%">
or
<div style="width:1px; height:20px; background-color:grey;vertical-align:middle;display: inline-block"></div>
Related
EDIT: I have updated both the CSS and the html. I have figured out the centering, but am still having trouble with the alignment of labels and fields.
I need for the input fields and labels to be lined up to where there is a perfect line running down the center of them, essentially dividing them because the labels are stacked on top of one another and input fields are stacked on top of one another.
The code below already resembled how I want it to look, other than that the form is on the left edge and my labels and input fields aren't perfectly lined up.
This is my form so far:
<div style="text-align:center">
<form>
<div>
Name: <input type="text" name="Name" size="40"/>
<br/>
<br/>
</div>
<div>
Address: <input type="text" name="Address" size="50"/>
<br/>
<br/>
</div>
<div>
City: <input type="text" name="City" size="25"/>
<br/>
<br/>
</div>
<div>
State: <input type="text" name="State" size="25"/>
<br/>
<br/>
</div>
<div>
Zip: <input type="text" name="Zip" size="25"/>
<br/>
<br/>
</div>
<div>
Email: <input type="text" name="Email" size="40"/>
<br/>
<br/>
</div>
<div>
Subscribe to our mailing list?
<br/>
<input type="radio" name="AddToList" value="yes" checked="checked" />Yes
<input type="radio" name="AddToList" value="no" />No
<br/>
<br/>
</div>
<div>
Comments:<br/>
<textarea name="comments" cols="70" rows="10" placeholder="Expected value of input"></textarea>
<br/>
<br/>
<input type="submit" />
<input type="reset" />
</div>
</form>
</div>
So far, the only CSS I have for this form is:
form {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
}
This is what I am trying to accomplish:
Any help or advice would be great and highly appreciated, I am really just dumbfounded by this one. I tried using some of the centering methods for tables, none of which worked.
check this i just positioned it with css
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<style>label{
position: relative;
bottom: 2px;
}
input{
position: relative;
margin-top: 10px;
}
.text{
display: flex;
justify-content: center;
}
.text{
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div style="text-align:center">
<form>
<div>
<label> Name:</label>
<input type="text" name="Name" size="40"/>
</div>
<div>
<label style="left:27px"> Address:</label>
<input type="text" name="Address" size="50" style="left:27px;"/>
</div>
<div>
<label style="right: 46px;">City: </label>
<input type="text" name="City" size="25" style="right:46px;"/>
</div>
<div>
<label style="right:48px">State:</label>
<input type="text" name="State" size="25"/ style="right: 49px;">
</div>
<div>
<label style="right: 43px;"> Zip:</label> <input type="text" name="Zip" size="25" style="right: 44px;"/>
</div>
<div>
<label style="bottom: 0px;" > Email:</label>
<input type="text" name="Email" size="40"/>
</div>
<div style="right: 180px; position: relative;" >
<label>Subscribe to our mailing list?</label>
<input type="radio" name="AddToList" value="yes" checked="checked" />Yes
<input type="radio" name="AddToList" value="no" />No
<br/>
<br/>
</div>
<div class="text">
<br>
<br>
<label style="top: 60px; left: 70px;"> Comments: </label>
<textarea name="comments" cols="70" rows="10" placeholder="Expected value of input" style="left: 84px; position: relative;"></textarea>
<br/>
<br/>
</div >
<div class="submit" style="right: 80px; position: relative;">
<input type="submit" width="" />
<input type="reset" />
</div >
</form>
</div>
<script src="test.js"></script>
</body>
</html>
For centering things, try:
margin: auto;
justify-content: center;
text-align: center
This should align all the contents in the page as well as the text also with margins being equal.
Second option:
margin: auto;
width: 80%
This will take only 80% of total width of parent element and will automatically be centered if that also doesn't work then remove margin: auto from second option.
To center align, give the elements you want to align a class of "center", and then select the class in CSS. An example is :
.center {
text-align: center;
}
<div>
Email: <input type="text" name="Email" size="40" class="center"/>
<br/>
</div>
EDIT : W3 Schools is where I found the answer.
hello i'm creating a login form .but my check box and term text related to it not positioning correctly .i have add <br> tag but no effect .i tried clearfix it's not work either.here is the fiddle preview.
this is my html code
<div class="mainlog">
<form>
<label class="la" for="xname">Name</label><input name="xname" class="in" value="" type="text"><br>
<label class="la" for="xemail">Email</label><input name="xemail" class="in" value="" type="text"><br>
<label class="la" for="xpass">password</label><input name="xpass" class="in" value="" type="text"><br>
<label class="la" for="xpasscon">confirm</label><input name="xpasscon" class="in" value="" type="text"><br>
<input type="checkbox" name="term"/><label class="lb" for="term" >I have read and agree to the Terms of Use and the Privacy Policy</label><br>
<input type="submit" value="Sign Up" />
</form>
</div>
Wrap the checkbox and text in a div and float it left. Avoid the usage of <center> it will not be supported in HTML5
.mainlog {
width: 450px;
height: 250px;
border: 5px solid #DBDBDB;
border-radius: 5px;
padding: 20px;
}
.in {
padding: 8px;
border: 1px solid #DFDFDF;
width: 250px;
float: left;
margin-bottom: 10px;
border-radius: 5px;
}
.la {
width: 120px;
float: left;
text-align: left;
text-transform: uppercase;
color: #6B6B6B;
clear: both;
}
.lb {} .checkbox {
float: left;
}
}
<center>
<div class="mainlog">
<form>
<label class="la" for="xname">Name</label>
<input name="xname" class="in" value="" type="text">
<br>
<label class="la" for="xemail">Email</label>
<input name="xemail" class="in" value="" type="text">
<br>
<label class="la" for="xpass">password</label>
<input name="xpass" class="in" value="" type="text">
<br>
<label class="la" for="xpasscon">confirm</label>
<input name="xpasscon" class="in" value="" type="text">
<br>
<div class="checkbox">
<input type="checkbox" name="term" />
<label class="lb" for="term">I have read and agree to the Terms of Use and the Privacy Policy</label>
<br />
</div>
<input type="submit" value="Sign Up" />
</form>
</div>
</center>
Quick fix: wrapp checkbox with it's label into div with class "width".
Then in CSS add ".width" with styles: width:100%; clear:both.
.width{
width:100%;
clear:both;
}
Demo
I did a minor change in your code and it looks good to me. I am not sure if this is what you were looking for.
Please check the fiddle here.
These were the changes I made.
HTML:
<div class="lb"> <!-- added class "lb" to <div> and removed it from <label> -->
<input type="checkbox" name="term" />
<label for="term">I have read and agree to the Terms of Use and the Privacy Policy</label>
</div>
CSS:
.lb {
float:left; /* Floats the element to left */
}
I hope this works for you. :)
P.S. I have removed all the <br> tags inside the <form>
Can someone please help me with this css? I am very new and for some reason cannot figure something out that seems to be extremely simple. What I am trying to do is have gvw_field align next to the ew_field. I am not sure how to align the <div> 's next to each other.
http://jsfiddle.net/r45xfbex/
#gvw_field {
text-align:center;
}
<div class="clearfix">
<div id="ew_field">
<label for="ew">Empty Weight:</label>
<input type="text" name="ew" id="ew" value="">
</div>
<div id="gvw_field">
<label for="gvw" >Gross Vehicle Weight:*</label>
<input type="text" name="gvw" id="gvw" value="">
</div>
<div id="ft_field">
<label for="ft">Feet:</label>
<input type="text" name="ft" id="ft" value="">
</div>
</div>
Working jsFiddle Demo
The display: inline property will do it.
#gvw_field, #ew_field{
display: inline;
}
Readup about display property on MDN.
Working code snippet:
#gvw_field {
text-align:center;
}
#gvw_field, #ew_field{
display: inline;
}
<div class="clearfix">
<div id="ew_field">
<label for="ew">Empty Weight:</label>
<input type="text" name="ew" id="ew" value="">
</div>
<div id="gvw_field">
<label for="gvw" >Gross Vehicle Weight:*</label>
<input type="text" name="gvw" id="gvw" value="">
</div>
<div id="ft_field">
<label for="ft">Feet:</label>
<input type="text" name="ft" id="ft" value="">
</div>
</div>
Use floats to align each <div>
#gvw_field {
text-align:center;
}
.column{
width: 33.33%;
float: left;
}
<div class="clearfix">
<div class="column" id="ew_field">
<label for="ew">Empty Weight:</label>
<input type="text" name="ew" id="ew" value="">
</div>
<div class="column" id="gvw_field">
<label for="gvw" >Gross Vehicle Weight:*</label>
<input type="text" name="gvw" id="gvw" value="">
</div>
<div class="column" id="ft_field">
<label for="ft">Feet:</label>
<input type="text" name="ft" id="ft" value="">
</div>
</div>
use float and don't use same id for many items:
CSS:
.ft_field
{
float: right;
width: 50%;
}
label {
display: inline-block;
width: 170px;
}
.gvw_field {
float: right;
width: 50%;
}
HTML:
<div class="clearfix">
<div class="ew_field">
<label for="ew">Empty Weight:</label>
<input type="text" name="ew" id="ew" value=""/>
</div>
<div class="gvw_field">
<label for="gvw" >Gross Vehicle Weight:*</label>
<input type="text" name="gvw" id="gvw" value=""/>
</div>
<div class="ft_field">
<label for="ft">Feet:</label>
<input type="text" name="ft" id="ft" value=""/>
</div>
</div>
jsfiddle
You you need a display value of inline and also a given width.
#ew_field, #ft_field, #gvw_field {
text-align: center;
display: inline-block;
width: 150px; /* Adjust as needed */
}
See working demo here
How can i get the element the "keys_values" div next to the text box..i.e, all the elements inside the div should be visible next to the text box
<div id="edata" class="edata" >
<input type="text" class="users_percentage" style="width:65px;" placeholder="% of users"/>
<div class="keys_values" style="float:'left';">
<span>
<input type="text" class="e_keys" style="width:65px;" placeholder="key"/>
<input type="text" class="e_values" style="width:65px;" placeholder="value"/>
</span>
</div>
</div>
I'd recommend using this:
<div id="edata" class="edata">
<input type="text" class="users_percentage" placeholder="% of users" />
<div class="keys_values">
<span>
<input type="text" class="e_keys" placeholder="key" />
<input type="text" class="e_values" placeholder="value" />
</span>
</div>
</div>
CSS:
.users_percentage {
width:65px;
float:left;
margin-right:4px;
}
.keys_values {
float: left;
}
.e_keys, .e_values {
width: 65px;
}
Using the classes your elements already have allows you to separate the style and structure of the page.
Note: margin-right: 4px was only added to match the other input's style. If you're using normalize.css or similar then it might not be necessary.
Here it is working: http://jsfiddle.net/Fr3kD/1/
Update: To add extra span elements below each other use this HTML:
<div class="keys_values">
<span>
<input type="text" class="e_keys" placeholder="key" />
<input type="text" class="e_values" placeholder="value" />
</span>
<span>
<input type="text" class="e_keys" placeholder="key" />
<input type="text" class="e_values" placeholder="value" />
</span>
</div>
and add an extra CSS style:
.keys_values span{
display: block;
}
Here's a demo: http://jsfiddle.net/Fr3kD/3/
<div id="edata" class="edata" >
<div style="float:left; width:49%">
<input type="text" class="users_percentage" style="width:65px;" placeholder="% of users"/>
</div>
<div class="keys_values" style="float:left; width:49%">
<span>
<input type="text" class="e_keys" style="width:65px;" placeholder="key"/>
<input type="text" class="e_values" style="width:65px;" placeholder="value"/>
</span>
</div>
</div>
Try this
<div class="keys_values" style="float:'left';margin:-26px 0 0 70px">
DEMO
How could I align my input boxes so that the first one is aligned with the label and the other two is aligned underneath the top input box.
Why is my domain and dropdown menu not aligning?
CSS:
#newwebsiteForm{
padding:10px;
margin:10px 0;
width:480px;
position: relative
}
#newwebsiteForm label{
display:block;
float:left;
clear:both;
margin:0 15px 0 25px;
width:240px;
border:1px solid green;
height:15px
}
#newwebsiteForm input{
display:block;
float:left;
width:240px;
height:15px;
}
#newwebsiteForm .radioButton {
width:15px;
height:15px;
}
#newwebsiteForm .radioText {
display:block;
width:30px;
height:20px;
float:left;
font-size:12px;
border:1px solid red;
}
#newwebsiteForm #color1,#color2,#color3,#fav1,#fav2,#fav3{
display:block;
float:left;
margin-left:25px;
background-color:red;
}
#newwebsiteForm textarea{
display:block;
float:left;
}
input#domain,#newwebsiteForm select,
.form-field{float:right;width:200px;margin-top:-15px}
.form-field{width:220px}
HTML:
<div id="newwebsiteSection">
<form action="#" id="newwebsiteForm" method="get">
<fieldset>
<div>
<label>Do You Require Hosting?</label>
<span class="radioText">Yes</span><input class="radioButton" type="radio" name="Yes" value="Yes"/>
<span class="radioText">No</span><input class="radioButton" type="radio" name="No" value="No"/>
</div>
<div>
<label>Do You Require A Domain?</label>
<span class="radioText">Yes</span><input class="radioButton" type="radio" name="Yes" value="Yes"/>
<span class="radioText">No</span><input class="radioButton" type="radio" name="No" value="No"/>
</div>
<label>Do You Have A Logo?</label>
<span class="radioText">Yes</span><input class="radioButton" type="radio" name="Yes" value="Yes"/>
<span class="radioText">No</span><input class="radioButton" type="radio" name="No" value="No"/>
<label for="domain">What is your Domain?</label>
<input type="url" id="domain" value="http://example.com"/>
<label for="newwebsiteType">Type of site Required?</label>
<select name="newwebsiteType" id="newwebsiteType">
<option value="shoppingCart">Shopping Cart</option>
<option value="CMS">Content Management System</option>
<option value="static">Static Website</option>
<option value="otherDevelopment">Other Development</option>
</select>
<label>Do You Require A Design?</label>
<span class="radioText">Yes</span><input class="radioButton" type="radio" name="Yes" value="Yes"/>
<span class="radioText">No</span><input class="radioButton" type="radio" name="No" value="No"/>
<div>
<label>Three Favorite colors?</label>
<div class="form-field">
<input id="color1" value=""/>
<input id="color2" value=""/>
<input id="color3" value=""/>
</div>
</div>
<div>
<label>What are your favorite websites?</label>
<div class="form-field">
<input type="text" id="fav1" value=""/>
<input type="text" id="fav2" value=""/>
<input type="text" id="fav3" value=""/>
</div>
</div>
<label for="comments">Comments?</label>
<textarea name="comments" id="comments"></textarea>
<input type="submit" name="submit" value="Send Quote Request"/>
</fieldset>
</form>
</div>
Despite all the flack they've gotten lately, I feel like this is one of the few examples of where a table is actually not only useful, but the most correct solution.