I have been asked to vertically align the text in the labels for the fields in a form but I don't understand why they are not moving. I have tried putting in-line styles using vertical-align:top; and other attributes like bottom and middle but it doesn't work.
Any ideas?
<dd>
<label class="<?=$email_confirm_class;?>"
style="text-align:right; padding-right:3px">Confirm Email</label>
<input class="text" type="text"
style="border:none;" name="email_confirm"
id="email_confirm" size="18" value="<?=$_POST['email_confirm'];?>"
tabindex="4" />
*
</dd>
You can use flexbox in 2018+:
.label-class {
display: flex;
align-items: center;
}
Browser support: https://caniuse.com/#search=flexbox
Vertical alignment only works with inline or inline-block elements, and it's only relative to other inline[-block] elements. Because you float the label, it becomes a block element.
The simplest solution in your case is to set the label to display: inline-block and add vertical-align: middle to the labels and the inputs. (You might find that the height of the text is such that vertical align won't make any difference anyway.)
Have you tried line-height? It won't solve your problems if there are multiple row labels, but it can be a quick solution.
The vertical-align style is used in table cells, so that won't do anything for you here.
To align the labels to the input boxes, you can use line-height:
line-height: 25px;
I had a similar problem and solved it wrapping the label into a div and setting the following styles:
<div style="display: table; vertical-align: middle">
<label style="display: table-cell;" ... > ... </label>
</div>
This is what I usually do to "vertical align" text inside labels:
label {
display: block;
float: left;
padding-top: 2px; /*This needs to be modified to fit */
}
It won't scale very nicely, but it works.
I came across this trying to add labels o some vertical radio boxes. I had to do this:
<%: Html.RadioButton("RadioGroup1", "Yes") %><label style="display:inline-block;padding-top:2px;">Yes</label><br />
<%: Html.RadioButton("RadioGroup1", "No") %><label style="display:inline-block;padding-top:3px;">No</label><br />
<%: Html.RadioButton("RadioGroup1", "Maybe") %><label style="display:inline-block;padding-top:4px;">Maybe</label><br />
This gets them to display properly, where the label is centered on the radio button, though I had to increment the top padding with each line, as you can see. The code isn't pretty, but the result is.
label {
padding: 10px 0;
position: relative;
}
Add some padding-top and padding-bottom instead of height.
Use css on your label.
For example:
label {line-height:1em; margin:2px 5px 3px 5px; padding:2px 5px 3px 5px;}
Notice that the line-height will adjust the height of the line itself, whereas margin will dictate how far out other elements will be outside the lable and padding will dictate any inner space from the outside edge of the label. The margin and padding work like this (clockwise: Top Right Bottom Left), so 2px 5px 3px 5px is:
2px Top
5px Right
3px Bottom
5px Left
To do this you should alter the vertical-align property of the input.
<dd><label class="<?=$email_confirm_class;?>" style="text-align:right; padding-right:3px">Confirm Email</label><input class="text" type="text" style="vertical-align: middle; border:none;" name="email_confirm" id="email_confirm" size="18" value="<?=$_POST['email_confirm'];?>" tabindex="4" /> *</dd>
Here is a more complete version. It has been tested in IE 8 and it works.
see the difference by removing the vertical-align: middle from the input:
<html><head></head><body><dl><dt>test</dt><dd><label class="test" style="text-align:right; padding-right:3px">Confirm Email</label><input class="text" type="text" style="vertical-align: middle; font-size: 22px" name="email_confirm" id="email_confirm" size="28" value="test" tabindex="4" /> *</dd></dl></body></html>
Adding disply:flex property to the label will get the job done!
None of these worked for me. I am using ASP.Net MVC with Bootstrap.
I used the following successfully:
.label-middle {
padding-top:6px;
}
<label id="lblX" class="label-middle" ></label>
This vertically aligned the label with the textbox next to it.
If your label is in table, padding may cause it to expand. To avoid this you may use margin:
div label {
display: block;
text-align: left;
margin-bottom: -0.2%;
}
You don't have to add any padding or edit the line-height!
Instead, just make sure that when you have an HTML like this :
<label><input type="checkbox" name=""><span>Checkbox Text</span></label>
Just make sure that the input height and width are the same, and the the text has the same font size.
Then, it will look perfectly fine and looks centered.
You have this:
<label class="styling_target">Label Text</label>
<input />
Do this instead:
<label>
<span class="styling_target">Label Text</span>
<input />
</label>
Styling a label doesn't really work, but you can have arbitrary HTML inside it, and you can style that.
Force relative positions to provide top/bottom adjustments
.whatever {
position: relative;
}
.whatever .input {
position: relative;
}
.whatever span {
position: relative;
top: -2px; /* adjust this up or down */
}
<label class="whatever">
<input type="checkbox"><span>my thing</span>
</label>
Just set the vertical-align property of the label to top.
label {
vertical-align: top;
}
<label for="desc">Description</label>
<textarea name="desc" id="desc" cols="30" rows="10"></textarea>
Lacking in elegance, pure html, no CSS solution:
<table>
<tr>
<td>
<label></label>
</td>
</tr>
<tr>
<td>
<input></input>
</td>
</tr>
</table>
Related
I have a radiobutton that has two lines as a label. The whitespace between the lines are two much and I want to decrease them.
This is my code:
<label for="reg-promo">
<input type="radio" name="promotion" id="registerPromo" v-validate="'required'" checked="checked"
v-model="registerPromo" value="reg-promo" />
<span>
<b>Welcome Offer</b>
<p id="welcomeOfferSubtext">$35 in credits available</p>
</span>
</label>
welcomeOfferSubtext just simply adds 28px padding to the left of the paragraph:
#welcomeOfferSubtext {
padding-left: 28px;
}
Right now it looks like this:
But I want it to look like this:
What's the best way to fix it?
P.S
Please ignore the sentence differences. The focus is on spacing
I don't want to use line-height from CSS
The extra vertical space is probably coming from some other (or browser default) <p> CSS.
Either change the <p id="welcomeOfferSubtext"> to <div id="welcomeOfferSubtext">
Or add to your css:
#welcomeOfferSubtext {
padding-left: 28px;
margin: 0; // add this line
}
Firstly make span as inline-block, so that all elements within span will be aligned to span. Now you can do your css accordingly. <p> tag has some default margin, you can then modify it accordingly.
<style>
span{
display: inline-block;
vertical-align: top;
}
#welcomeOfferSubtext{
padding: 0;
margin-top: 5px;
}
</style>
I’m trying to align search fields. All my elements are within a parent container, which has the style
#statSearchFields {
vertical-align: top;
font-size: 90%;
}
The elements themselves have look like
<div class="searchField">
Start Date<br>
<input type="text" name="start_date" id="start_date" value="06/28/2014" placeholder="Start Date" class="datepicker hasDatepicker">
</div>
but when I put them in my container, they appear off-center. Here is the example fiddle — https://jsfiddle.net/n73ao02h/1/ . How do I bring everything into alignment?
You have to add vertical-align: top; to the .searchField selector.
Updated jsfiddle: https://jsfiddle.net/n73ao02h/2/
vertical-align: top isn't being inherited from your ID. Add the following to your CSS and you will have the results you would expect.
.searchField {
display: inline-block;
vertical-align:top;
}
Note: You should remove the vertical-align property from your #statSearchFields ID.
I am front-end stupid and can't ever figure this stuff out. For some reason I'm seeing an abnormal amont of space in between my radio button and the text.
look on bottom of page
I am using bootstrap and I feel as if it is doing this. How can I get that space to go away? There's no margin or anything on it current which is why I am a little confused.
<div class="radio">
<h4>By Price</h4>
<label><input type="radio" name="optradio"> Low </label>
<br />
<label><input type="radio" name="optradio"> High </label>
You're labels are floating left which means it's being pulled to the far left of your container. I would recommend wrapping your content in columns. So something like this would work...
<div class="radio col-sm-3">
<h4>By Price</h4>
<label><input type="radio" name="optradio"> Low </label>
<br />
<label><input type="radio" name="optradio"> High </label>
</div>
If your content is then not centred, I would add this to your CSS...
.radio {
margin: 0 auto;
}
That should centre your content.
.radio{
width: 100px;
margin-left: auto;
margin-right: auto;
}
Also use a different div class.
<div class="radio col-sm-3">
I believe it's because the Div with class "radio" has a default width of 100%. When I change the css for .radio to width: 100px (or a percentage of your choice) then the radio button is much closer to the text. You will also have to center the div with the margin-left and margin-right as follows
.radio{
width: 100px;
margin-left: auto;
margin-right: auto;
}
As stated, the radio buttons are floated left in CSS.
This is a CSS rule meaning they're being taken out of the flow of the document.
The result is that they're positioned relative to the parent div, instead of according to their relationship to other block-level elements (the labels). That's pushing them all the way to the left of the form element.
In your external CSS file (not "products.css" but the one w/the gigantic hashed name) find this line:
.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
float: left;
margin-left: -20px;
}
The offending code is float: left;
Remove the float and the inputs should rest directly next to the text.
Play with the margin settings to position it as you like.
I would recommend using:
<input type="radio" name="optradio"> Low <br />
<input type="radio" name="optradio"> High
I'm pretty sure it will work.
I had the same problem, Later i found out it was because i created a class for input like,
.input
{
width: 200px;
border: 1px solid #000;
padding: 5px;
}
Later i edited the input with some other name like,
input.a1
{
width: 200px;
border: 1px solid #000;
padding: 5px;
}
and the problem solved for me;
I want to re-size the label of a text-area in the format shown in the picture below. I'm trying to do a wrap using a paragraph tag, but it is not working.
My code:
<label for="qual">This is the format i want the text-area to be displayed:</label>
<textarea id="qual" rows="5" cols="50" style="resize:none" placeholder="Description and Qualification"></textarea><br><br>
Desired Output:
style="max-width: 140px; word-wrap: break-word"
place these styles in your label tag and adjust the max-width or min-width to your needs.
This doesn't work in Internet Explorer
Try white-space: normal;
For more details visit
http://www.w3schools.com/cssref/pr_text_white-space.asp
Here is a JSFiddle solution.
The HTML:
<label for="qual" class="abc">This is the format i want the text-area to be displayed:</label>
<textarea id="qual" rows="5" cols="50" style="resize:none" placeholder="Description and Qualification"></textarea>
The CSS:
.abc{float:left; width:125px; text-align:left; margin-right:30px;}
If you don't want to create a class, you can apply the styles on label in the CSS.
Something like this:
label {
float: left;
width:120px;
padding:10px 30px;
font-weight:bold;
}
Demo
In the block of your HTML add:
<style>
label { padding:5px; font-weight:bold; float:left; width:150px; }
</style>
The style settings above will also replace the spacing:
<label for="qual">This is the format i want the text-area to be displayed:</label>
<textarea id="qual" rows="5" cols="50" style="resize:none" placeholder="Description and Qualification"></textarea>
You want to style the label and textarea elements in a self-contained, bullet-proof manner.
I suggest the following HTML:
<div class="wrap">
<label for="qual">This is the format...to be displayed:</label>
<textarea id="qual" rows="5" cols="50" style="resize:none"
placeholder="Description and Qualification"></textarea>
</div>
with the following CSS:
.wrap {
outline: 1px dotted blue; /* Just for demonstration... */
overflow: auto;
}
.wrap label {
outline: 1px dashed blue;
float:left;
width: 10em;
margin-right: 1.00em;
}
Define a parent container div.wrap to hold the two child elements and specify overflow: auto to generate a new block formatting context.
You want to do this to make sure that the floated label field does not interfere with any other adjacent elements that may be in the page or form. This may be important if you are building a responsive design.
The <label> field is floated left and you must specify a suitable width. You can also apply margins, background color or images, padding as needed to create the design that you need.
Fiddle: http://jsfiddle.net/audetwebdesign/2sTez/
Imagine the following illustrative HTML:
<form>
<div class="line">
<label class="lbt" for="name">Name:</label>
<span class="obr">*</span>
<input id="name" class="inp" type="text" />
<span class="err">Missing!</span>
</div>
<div class="line">
<label class="lbt" for="area">Area:</label>
<input name="area" class="inp" type="text" />
<span class="suf">m<span style="vertical-align: super;">2</span></span>
<span class="err">Missing!</span>
</div>
</form>
By client requirement, both the label and the span with the obligatory indicator must be in the same line, being the input and the rest of the spans in the next line.
The obligatory indicator must be right after the label text and the other spans right after the input element.
Sadly I can't change the HTML code or I would put the obligatory element inside the label and use a display: block style (or wrap both in a span and do the same).
I tried using the .obr::after to create a line break but since this element doesn't always exist and I can't use ::before in an input element so I tend to believe using content isn't feasible unless there's a way to put it conditionally (.lbt::after or in .obr::after if exists). Here's a jsfiddle with this problem.
I also tried float and positions approaches but haven't found a good generic solution that could fit any label or input size.
I may consider using jQuery for this, but I would prefer a simpler approach only by CSS.
Been almost two days trying to find a good solution...
label and the * <span> right beside each other.
<input /> and the other <span> beside each other on another line.
.line
{
border: 2px solid black;
padding: 5px;
overflow:hidden;
}
.line .obr
{
color: Red;
font-weight: bold;
float:left;
}
.lbt
{
float:left;
}
.line .obr::after
{
content: '\A';
white-space: pre;
}
.inp
{
float:left; clear:both;
margin-top:5px;
}
.line span
{
float:left;
}
Check this out : http://jsfiddle.net/AliBassam/2LqCc/
If you want the <span> beside the <input /> to be lower then add margin-top:5px;