I have following html and my goal is to align the labels for the text boxes so that they are aligned with left edges of their text boxes. Right now they are center aligned due to css on outermost div. Also, I do not want to lose the center alignment of the outermost div.
I tried setting text-align:left for each of the labels but it did nothing.
A demo for this question is at following URL: Demo
Question : What css I need to use to left align the labels?
<div style="margin: 0 auto; text-align: center; margin-top: 20px; width: 800px;">
<div>
<fieldset>
<label for="txtName">Full Name</label><br>
<input id="txtName" type="text" style="width:80%" /><br>
<label for="txtCity">City</label><br>
<input id="txtCity" type="text" style="width:80%" /><br>
</fieldset>
</div>
</div>
You need to use:
display: block for label as it is an inline element.
You haven't closed <div> correctly.
Remove the <br> and update this way:
See the updated snippet, that works:
label {
text-align: left;
display: block;
text-indent: 10%;
}
<div style="margin: 0 auto; text-align: center; margin-top: 20px; width: 800px;">
<div>
<fieldset>
<label for="txtName">Full Name</label>
<input id="txtName" type="text" style="width:80%" /><br>
<label for="txtCity">City</label>
<input id="txtCity" type="text" style="width:80%" /><br>
</fieldset>
</div>
</div>
Preview:
Related
I have an example of form draft in Microsoft Word as shown:
and I'm trying to recreate this form as a web page via HTML but I'm having issues with getting the textbox label alignment to be exactly like the one in the draft which is somewhat "right" aligned, followed by the textbox.
When I added the HTML elements it is currently as so:
However I'm trying to achieved the "right" alignment of the labels like the draft above, so I tried using the "text-align: right" function in css but this is what I got instead.
It achieves what I wanted which is for the label to be right aligned but everything got shifted to the right at the end of the div, which means if I were to want the fields to be sort of positioned somewhat left like the draft, does this mean that I would have to move each individual element via the "left" positioning attribute in css? Is there any more efficient way I could use for this?
* {
margin: 0;
padding: 0;
}
.outer_frame {
position: relative;
border: 1px solid black;
}
.inner_frame {
border: 1px solid black;
height: 600px;
width: 700px;
text-align: right;
}
<div class="outer_frame">
<div class="inner_frame">
<div class="entry">
<label id="name">Name</label>
<input type="text" id="name_in" disabled class="field">
</div>
<div class="entry">
<label id="addr">Address</label>
<input type="text" id="addr_in" disabled class="field">
</div>
<div class="entry">
<label id="tel">TelephoneNumber</label>
<input type="text" id="tel_in" disabled class="field">
</div>
<div class="entry">
<label id="iden">Identity Number</label>
<input type="text" id="identity_in" disabled class="field">
</div>
<div class="entry">
<label id="cpny">Company</label>
<input type="text" id="com_in" disabled class="field">
</div>
<div class="entry">
<label id="job">Job Title</label>
<input type="text" id="job_in" disabled class="field">
</div>
</div>
</div>
make your labels inline block, give them a width (as large as the largest text) and then align them right:
label {
display: inline-block;
width: 7.75em;
text-align: right;
margin-right: 2em;
}
<div class="entry">
<label id="name">Name</label>
<input type="text" id="name_in" disabled class="field">
</div>
<div class="entry">
<label id="addr">Address</label>
<input type="text" id="addr_in" disabled class="field">
</div>
<div class="entry">
<label id="tel">TelephoneNumber</label>
<input type="text" id="tel_in" disabled class="field">
</div>
<div class="entry">
<label id="iden">Identity Number</label>
<input type="text" id="identity_in" disabled class="field">
</div>
<div class="entry">
<label id="cpny">Company</label>
<input type="text" id="com_in" disabled class="field">
</div>
<div class="entry">
<label id="job">Job Title</label>
<input type="text" id="job_in" disabled class="field">
</div>
Add margin: auto to .inner_frame if you want it to take the size of the content and add the code below to adjust the lines
.inner_frame{ margin:auto }
.entry{
display:flex
justify-content: space-between;
margin:1em
}
You can fix the width of your labels and then align them to the right:
.entry label {
display: inline-block;
width: 200px;
text-align: right;
margin-right: 10px;
}
Adding the below definition to your inner-frame class will fix the issue
margin:auto; //will center the div
if you need to align it to a different area, use exact values to the margin
margin: 10px 50px 20px 0;
Read more on the topic on the MDN site
Currently I am making a form that has multiple inputs and I am using flex box to make these inputs appear in a column, and text-align center to get the whole form into a centered row. I am attempting to get the text boxes all be in the center of the page and the text move over accordingly.
.mainForm {
text-align: center;
}
.left {
float: left;
}
.inputs {
display: flex;
flex-direction: column;
}
.radio {
display: flex;
justify-content: center;
}
textarea {
overflow-y: scroll;
resize: none;
}
.feedBack {
text-align: center;
}
<div class="information">
<p class="formInputs"> Policy Number:
<input id="polNum" name="polNum" type="text" onkeyup="javascript:displayPolicyNumber()" /></p>
<p class="print">Policy Number: <span class="display" id="display_policyNumber"></span></p>
<p class="formInputs">Control Number:
<input id="membNbr" name="membNbr" type="text" onkeyup="javascript:displayControlNumber()" /></p>
<p class="print">Control Number: <span class="display" id="display_controlNumber"></span></p>
<p class="formInputs">Last Name or Business Name:
<input id="lastName" name="lastName" type="text" onkeyup="javascript:displayLastName()" /></p>
<p class="print">Last Name or Business Name: <span class="display" id="display_lastName"></span></p>
<p class="formInputs">First Name :
<input id="firstName" name="firstName" type="text" onkeyup="javascript:displayFirstName()" /></p>
<p class="print">First Name: <span class="display" id="display_firstName"></span></p>
<p class="formInputs">Comments:
<textarea name="comment" id="comment" cols="30" rows="2" onkeyup="javascript:displayComments()"></textarea></p>
<p class="print">Comments: <span class="display" id="display_comment"></span></p>
</div>
If you want your input/textarea to be absolutely centered, you will have to wrap your text in the <label> element (or any other HTML element, but for usability reason you should always use <label>). That is because we want to position the text independently of the input. An example:
<p class="formInputs">
<label for="polNum">Policy Number:</label>
<input id="polNum" name="polNum" type="text" />
</p>
When that is done, you can use the following trick:
Set a fixed width for your input elements. Let's say we want them to be 200px wide. Instead of setting this on the input elements themselves, we set it on the containing parent, .formInputs, and then set input elements to take up this full width.
Position the <label> element absolutely within the .formInputs parent. Set it to right: 100% so that it will be offset to the left by the full width of the parent.
Use a right padding so that the right edge of the label text is not directly sticking to the left border of your input
See proof-of-concept below:
textarea {
overflow-y: scroll;
resize: none;
}
.formInputs {
position: relative;
width: 200px;
margin: 0 auto;
}
.formInputs label {
position: absolute;
right: 100%;
padding-right: 10px;
white-space: nowrap;
}
.formInputs input,
.formInputs textarea {
width: 100%;
}
<div class="information">
<p class="formInputs">
<label for="polNum">Policy Number:</label>
<input id="polNum" name="polNum" type="text" />
</p>
<p class="formInputs">
<label for="membNbr">Control Number:</label>
<input id="membNbr" name="membNbr" type="text" />
</p>
<p class="formInputs">
<label for="lastName">Last Name or Business Name:</label>
<input id="lastName" name="lastName" type="text" />
</p>
<p class="formInputs">
<label for="firstName">First Name:</label>
<input id="firstName" name="firstName" type="text" />
</p>
<p class="formInputs">
<label for="comment">Comments:</label>
<textarea name="comment" id="comment" cols="30" rows="2"></textarea>
</p>
</div>
Something like this?
.information{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
http://jsfiddle.net/Lcgfqjh9/
You can put the whole thing in a wrapper, apply flex with the below settings to it to center the form, and apply flex and justify-content: space-between to the single lines (i.e. the .formInputs elements) to align the text and input fields at the left and right border:
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.formInputs {
display: flex;
justify-content: space-between;
}
<div class="wrapper">
<div class="information">
<p class="formInputs"> Policy Number:
<input id="polNum" name="polNum" type="text" onkeyup="javascript:displayPolicyNumber()" /></p>
<p class="print">Policy Number: <span class="display" id="display_policyNumber"></span></p>
<p class="formInputs">Control Number:
<input id="membNbr" name="membNbr" type="text" onkeyup="javascript:displayControlNumber()" /></p>
<p class="print">Control Number: <span class="display" id="display_controlNumber"></span></p>
<p class="formInputs">Last Name or Business Name:
<input id="lastName" name="lastName" type="text" onkeyup="javascript:displayLastName()" /></p>
<p class="print">Last Name or Business Name: <span class="display" id="display_lastName"></span></p>
<p class="formInputs">First Name :
<input id="firstName" name="firstName" type="text" onkeyup="javascript:displayFirstName()" /></p>
<p class="print">First Name: <span class="display" id="display_firstName"></span></p>
<p class="formInputs">Comments:
<textarea name="comment" id="comment" cols="30" rows="2" onkeyup="javascript:displayComments()"></textarea></p>
<p class="print">Comments: <span class="display" id="display_comment"></span></p>
</div>
</div>
Wrap your form in a div.
Set the div's display to block and text-align to center (this will
center the contained form).
Set the form's display to inline-block (auto-sizes to content), left
and right margins to auto (centers it horizontally), and
text-align to left (or else its children will be center-aligned too).
HTML file
<div class="form">
<form method = "post", action="">
---------
</form>
</div>
in .css
use like this
div.form {
display: inline-block;
text-align: center;
}
I have a page at http://zackelx.com/50/SO_a9.html with a BUY button. When you go to the page with Chrome and click the button a checkout form comes up where the blue Pay button is located correctly under the last input field:
But if you go to the page with Safari you get:
I'm using Safari 5.1.7 on a Windows 7 machine.
The HTML for the checkout form around the Pay button is:
<label id="instr">instr</label>
<input type="text" id="instructions" placeholder="size, color, etc."/><br />
<div class="button">
<div class="inner">
<button type="submit">
<span class="pay_amount">123</span>
</button>
</div>
</div>
The browser should place div.button underneath the input#instructions element, and Chrome does that. But Safari places it a few pixels down from the top of the input element, as if div.button had a style something like position:relative; top:-20px. But there's nothing like that, and using the Safari inspector I don't see anything that would keep div.button from being placed completely under input#instructions.
Does anyone see what's going on here?
whole code for the pop up form:
<form action="" method="POST" id="checkout_form" autocomplete="off">
<label id="state">state</label>
<input type="text" size="20" id="checkout_form_state" class="state generic" placeholder="NY" autocomplete="" required=""><br>
<label id="cc">cc#</label>
<input type="text" size="20" id="checkout_form_cc_number" class="cc-number" x-autocompletetype="cc-number" required=""><br>
<label id="exp">exp</label>
<input type="text" id="checkout_form_cc_exp" class="cc-exp" x-autocompletetype="cc-exp" placeholder="MM/YY" required="" maxlength="9">
<label id="CVC">cvc</label>
<input type="text" class="cc-cvc" x-autocompletetype="cc-csc" placeholder="CVC" required="" maxlength="4" autocomplete=""><br>
<label id="instr">instr</label>
<input type="text" id="instructions" placeholder="black"><br>
<div class="button">
<div class="inner">
<button type="submit">
<span class="pay_amount">Pay $12.00</span>
</button>
</div>
</div>
<img id="padlock" src="https://zackel.com/images/padlock_30.jpg" alt="padlock">
<img id="creditcards" src="https://zackel.com/images/creditcards.jpg" alt="creditcards">
<div id="validation"></div>
</form>
css:
#checkout_form {
position: relative;
top: 24px;
left: 43px;
width: 224px;
display: inline;
}
You are seeing Safari-specific rendering issues related to the positioning used.
Solution:
You don't need to change any of the HTML, just overwrite the CSS by placing the following CSS at the end of your stylesheet:
I tested it in Safari (Windows) v5.1.7, and it seems to work fine.
For the #checkout_form element, top: auto/left: auto are used to reset the positioning that was previously being used. I gave the element a width of 100%, and used padding to position the elements. box-sizing: border-box is used to include the padding in the element's width calculations. The vendor prefixes are used to support older browsers (-webkit- in Safari's case).
For the parent button wrapper element and the credit card image, margin: 10px 0 0 50px was essentially used to displace the element and centered it below the field elements. It's worth pointing out that text-align: center on the parent #checkout_form element was being used to center the elements.
I presume that you wanted the #padlock element hidden, thus display: none.
#checkout_form {
top: auto;
left: auto;
width: 100%;
display: block;
padding: 25px 38px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}
#checkout_form .button,
img#creditcards {
margin: 10px 0 0 50px;
}
#checkout_form .button button {
position: static;
}
#checkout_form img#padlock {
display: none;
}
You have style for the form element
#checkout_form {
position: relative;
top: 24px;
left: 43px;
width: 224px;
display: inline;
}
display:inline; is what is causing the problem, and makes the button look like its floating. and not correctly rendered in safari. I dont know the cause of the issue in safari, but I have a workaround which works(I tried on on your website and it perfectly works on chrome and safari).
Change your markup a little, add a div tag inside the form to contain only the labels and the inputs but not the button you want to render on the next line.
<form action="" method="POST" id="checkout_form" autocomplete="off">
<div style="display: inline;">
<label id="email">email</label>
<input type="email" size="20" id="checkout_form_email" class="email generic" placeholder="john#comcast.net" required="" autocomplete=""><br>
<label id="phone">phone</label>
<input type="text" size="20" id="checkout_form_phone" class="phone generic" placeholder="(209) 322-6046" autocomple="" required=""><br>
<label id="name">name</label>
<input type="text" size="20" id="checkout_form_name" class="name generic" placeholder="John Doe" autocomplete="" required=""><br>
<label id="street">street</label>
<input type="text" size="20" id="checkout_form_street" class="street generic" placeholder="123 Maple St." autocomplete="" required=""><br>
<label id="city">city</label>
<input type="text" size="20" id="checkout_form_city" class="city generic" placeholder="San Jose" autocomplete="" required=""><br>
<label id="state">state</label>
<input type="text" size="20" id="checkout_form_state" class="state generic" placeholder="NY" autocomplete="" required=""><br>
<label id="cc">cc#</label>
<input type="text" size="20" id="checkout_form_cc_number" class="cc-number" x-autocompletetype="cc-number" required=""><br>
<label id="exp">exp</label>
<input type="text" id="checkout_form_cc_exp" class="cc-exp" x-autocompletetype="cc-exp" placeholder="MM/YY" required="" maxlength="9">
<label id="CVC">cvc</label>
<input type="text" class="cc-cvc" x-autocompletetype="cc-csc" placeholder="CVC" required="" maxlength="4" autocomplete=""><br>
<label id="instr">instr</label>
<input type="text" id="instructions" placeholder="black"><br>
</div>
<div class="button" style="display: inline-block;">
<div class="inner">
<button type="submit">
<span class="pay_amount">Pay $12.00</span>
</button>
</div>
</div>
<img id="padlock" src="https://zackel.com/images/padlock_30.jpg" alt="padlock">
<img id="creditcards" src="https://zackel.com/images/creditcards.jpg" alt="creditcards">
<div id="validation"></div>
</form>
I have wrapped your form with a div with style display-inline,
and add a style display:inline-block to the div in which you have wrapped your button.
<div class="button" style="display: inline-block;">
<div class="inner">
<button type="submit">
<span class="pay_amount">Pay $12.00</span>
</button>
</div>
</div>
remove the position relative css properties and add margin in your css.
**Previous code:**
#checkout_form button {
/* position:relative; */
/* top:9px; */
/* left:71px; */
height:34px;
width:180px;
/* background-image:linear-gradient(#47baf5,#2378b3); */
border:none;
border-radius: 6px;
/* blue gradient */
background: #17b4e8;
background: -moz-linear-gradient(#47baf5,#2378b3);
background: -webkit-linear-gradient(#47baf5,#2378b3);
background: -o-linear-gradient(#47baf5,#2378b3);
background: -ms-linear-gradient(#47baf5,#2378b3);/*For IE10*/
background: linear-gradient(#47baf5,#2378b3);
}
**New css:**
#checkout_form button {
height:34px;
width:180px;
/* background-image:linear-gradient(#47baf5,#2378b3); */
border:none;
border-radius: 6px;
/* blue gradient */
background: #17b4e8;
background: -moz-linear-gradient(#47baf5,#2378b3);
background: -webkit-linear-gradient(#47baf5,#2378b3);
background: -o-linear-gradient(#47baf5,#2378b3);
background: -ms-linear-gradient(#47baf5,#2378b3);/*For IE10*/
background: linear-gradient(#47baf5,#2378b3);
margin: 9px 0 0 71px;
}
I have a <div> with display: inline; property and I want to center it.
If I put margin: 0 auto works without display but I need the display not to take all the space like it's a block.
Html
<div id="login1">
<fieldset id="login2">
<form method="post" action="register.php">
<label>Nombre: </label>
<input type="text" name="nombre" placeholder="Nombre de usuario"><br>
<label>Password:</label>
<input type="password" name="password" placeholder="Password"><br>
<input type="submit" value="LogIn">
<input type="reset" value="Reset">
</form>
</fieldset>
</div>
Css
#login1 {
display: inline-block;
text-align: center;
}
I want to center all the <div>
Some idea?
Put text-align: center on the container (the element that contains your div).
And your div shall be centered.
I am trying to figure out how to align the left side of all of the inputs together. Right now the entire .element row is aligned to the left, so all of the input fields are staggered. I don't want the inputs stagger I want the labels text aligned to the right and the inputs all aligned together. I've tried a bunch of random CSS, but I can't seem to figure it out. Any ideas?
<form>
<div class="element"><label>Name:</label><input name="Name" type="text" /></div>
<div class="element"><label>Email:</label><input name="Email" type="text" /></div>
<div class="element"><label>Phone:</label><input name="Phone" type="text" /></div>
<div class="element"><label>Address Line 1:</label><input name="Address1" type="text" /></div>
<div class="element"><label>Address Line 2:</label><input name="Address2" type="text" /></div>
<div class="element"><label>City:</label><input name="City" type="text" /></div>
<div class="element"><label>State:</label><input name="State" type="text" /></div>
<div class="element"><label>Zip Code:</label><input name="ZipCode" type="text" /></div>
<div class="element"><label>Birth Date:</label><input name="Bdate" type="text" /></div>
<div class="element"><label>Class Selection:</label><input name="Class" type="text" /></div>
<div class="element"><label>Preferred Meeting Time:</label><input name="Time" type="text" /> </div>
</form>
#registerwrapper .element {
margin-bottom: 15px;
vertical-align: middle;
}
#registrationwrapper label * {
float: left;
font-size: 16px;
}
#registrationwrapper input {
padding: 5px;
margin-left: 10px;
}
Hey now used to this stylesheet Give to your label Display inline-block; and give to width according to your layout
Live demo
The direct answer to your question is this:
label {
display: block;
margin-right: 5px; /* give some breathing room between your label and inputs */
padding-top: ?px; /* add this if you're v-aligning to top to adjust the label alignment to the input */
text-align: right;
vertical-align: top; /* add this when you've got larger fields like textareas bumping things out of alignment */
width: ?px;
}
But, I feel compelled to ask why you're wrapping all your label/field combos with divs (layers)? I recommend using paragraphs instead, like so:
<form>
<p>
<label for="">Field</label>
<input id="" />
</p>
</form>
And you also don't need to add a class to each row. Just do this:
form p {
}
form p label {
}
form p input {
}
Now the amount of bytes you're sending to the client is far less, and the HTML is far easier to read.
Did Some changes your code,
See the link : http://jsfiddle.net/anglimass/V4HAM/8/