Simply enough I can't get text to align to right in a <label> element.
HTML
<div id="contact_form">
<label for="name" id="name_label">Name:</label>
</div>
CSS
#contact_form label {
text-align: right;
}
My page: http://freshbeer.lv/development/en/contact.php
You can see labels for name, phone, email etc... are aligned to the left, but I need them to be aligned to the right, so could anyone please suggest something?
Label is an inline element - so, unless a width is defined, its width is exact the same which the letters span. Your div element is a block element so its width is by default 100%.
You will have to place the text-align: right; on the div element in your case, or applying display: block; to your label
Another option is to set a width for each label and then use text-align. The display: block method will not be necessary using this.
You can make a text align to the right inside of any element, including labels.
Html:
<label>Text</label>
Css:
label {display:block; width:x; height:y; text-align:right;}
This way, you give a width and height to your label and make any text inside of it align to the right.
As stated in other answers, label is an inline element. However, you can apply display: inline-block to the label and then center with text-align.
#name_label {
display: inline-block;
width: 90%;
text-align: right;
}
Why display: inline-block and not display: inline? For the same reason that you can't align label, it's inline.
Why display: inline-block and not display: block? You could use display: block, but it will be on another line. display: inline-block combines the properties of inline and block. It's inline, but you can also give it a width, height, and align it.
Related
Overflow doesn't appear to be working when I use display: inline. I need to have the text inline, because it's something that appears at the top right of the webpage with "Hello," in front of it and a drop down arrow behind the name. If I remove the display: inline, the overflow works, but then the word in front and the image behind the name drops to a new row. I tried using inline-block, but that causes the text to actually wrap, though it's hidden, the name looks like I superscript it.
How can I make this work property?
div.actualName {
display: inline;
width: 40px;
height: 20px;
overflow: hidden;
}
This is
<div class="actualName">Bobby Joe Sanders</div>computer.
<br/>
Use inline-block but add the vertical-align:top rule. The default vertical alignment for inline elements is baseline.
div.actualName {
display: inline-block;
width: 40px;
height: 20px;
overflow: hidden;
vertical-align:top;
}
This is
<div class="actualName">Bobby Joe Sanders</div>computer.
<br/>
Using a styled span might be more useful in this particular example versus applying a div and class to style a few words in your line of text. Spans are more similar to in-line elements while divs are more like block elements. Let me know if it helps! Good luck.
I am new to CSS/HTML and struggling to understand why when putting text "Title" out of div.position container label goes down. Thanks for you help.
My code
CSS code:
div {
display: inline-block;
}
.position {
float: left;
}
HTML code:
<div>
<label>Label</label>
<div class="group">
<div class="position">
<input type="radio" />
</div>
Title
</div>
</div>
The default value for vertical-align is baseline.
That's why the label appears at the baseline of the parent div. (see the image)
However when the title text is within the position div the height of the div is less - that's why it looks like the label stays on top. In reality it is still at the baseline of the parent div.
If you set vertical-align:top on the label it will appear at the top like it should
FIDDLE
You need to set the label float to left:
label {
float: left;
}
http://jsfiddle.net/w6kosc2v/2/
Here is a good article about how floating works: All About Floats which might explain a little more about floats to you.
Shortly said a float will float to the side you set it to; float: right floats to the right, while an image is floated to the right, all other inline elements tend to wrap around your float, a your <label> tag did. You can fix this by either removing the float: left from your .position or also by adding it to the label.
I hope this awnser makes it somewhat more clear.
I want to change the margin between the label and input of a simple HTML form. The labels are below the input fields. When I set a class I can change other properties like font-size but not margin.
A <label> is displayed as inline by default. You have to change that to inline-block or block in order to set the margin.
label {
display: inline-block;
margin: 10px;
}
Some resources to learn more about the CSS box model:
MDN article
CSS-Tricks article
Some resources to learn more about the display attribute in CSS:
MDN article
you can't set margin top and bottom for , because tag is called as inline element, if u need to set margin top or bottom,then change to block element like below codes
label {
margin: 10px 0px;
display: block;
}
or
label {
margin: 10px 0px;
float: left;
}
If you add css "Float:left" for any element , then tat will changed as block element
Think of spans and text to be inline. In-line elements must be turned block in order to use a margin. Also making it block means if the label is too big it can push content down.
I'm new in CSS, and I've got one question. I'd like to make a good simple form, and there is the following code:
<form>
<div class="row"><label for="name">Some text field</label><input type="text" name="name" /></div>
<div class="row"><label for="surname">Some another text field</label><input type="text" name="surname" /></div>
</form>
Some CSS code:
label {
float: left;
width: 230px;
text-align: right;
margin: 5px;
}
.row {
clear: left;
}
I copied and pasted this code from some book. I understand floating, clearing, but I don't understand why does "width" attribute work with label (because it inline element) and, in this case, why doesn't "width" work without "float"? Please, make me clear. Thanks
The Label element is defaulted to inline display mode.
Inline elements don't accept a width property, they will be rendered in the width of their content.
Floated elements on the other hand, are like inline-blocks. they will accept a width property.
By applying a float property to an element you are essentially changing it's display property to something like (but not exactly) inline-block.
label is inline element so it doesn't accept the width. To accept the width of any element it should be either inline-block or block element. And by setting float to any element behaves like this is an inline-block element and also another info for you position absolute or fixed also thinks as it is a block level element.
If you want to make label accept the width you should define label as inline-block.
label {
/*float: left;*/
display: inline-block;
width: 230px;
text-align: right;
margin: 5px;
}
In this example, I'm setting width:200px on form labels.
This is not being applied for some reason, and the field appears 0 width when viewed in Chrome Dev Tools.
Any idea why?
label is an inline element, like a span. It does not have width, but flows with its content. To get it to behave like a div, you would have to instruct it to act like a block-level element:
display: block
From there, you could add width:
width: 200px;
float: left;
As above, you need to get your label to behave like a block element to get it to respect your width declaration. The simplest way to do this is to set it to inline-block like this:
#form label {
width:200px;
display: inline-block;
}
Or, as #David mentions, float it left. This article describes getting this to work cross-browser.
This is because the label is an inline element so does not have a width property. To set the width you need to make it a block or inline-block element:
#form label {
display: block;
width: 200px;
}
Label is an inline element, so you cannot apply a fixed width to it (unless you change its display behavior). See here for a quick map of options/browser compatibility
http://www.quirksmode.org/css/display.html