With respect to vertical-align, W3C spec says:
The following values only have meaning with respect to a parent inline
element, or to the strut of a parent block container element.
What's the meaning of parent inline element here? Is it the first inline element inside a container? If yes, why is it called "parent"?
Best explained with an example, I think.
.bar {
vertical-align:-20px;
}
.baz, .qux {
vertical-align: text-top;
line-height:30px;
}
<div>foo
<span class="bar">bar
<span class="baz">baz</span>
</span>
<span class="qux">qux</span>
</div>
All the spans and text content are part of a single line box. The div establishes the inline formatting context, the line box and its strut.
The "foo" text sits on the baseline with respect to the strut's baseline.
The .bar span is offset with respect to the strut's baseline by 20px.
The .baz and .qux spans have the same styling, where the top of their upper half leading is aligned with the top of content area of their "parent". But you can see that they are not aligned with one another.
That's because the .qux span is aligned with respect to the strut, but the .baz is aligned with respect to its parent inline element, that is, the .bar span element.
Related
I read in various places that text-align: center only works on text and inline elements. It works on my header elements but not my ul and blockquote elements. I had to add display: inline-block for the ul to be centered.
I understand that it works on the headers because, while they the whole element is a block, they contain inline text. But how is that any different from my ul and blockquote elements? Isn't it true that they're also block-level elements that contain text?
For additional reference, see my CodePen.
text-align works when you want to center inline (or inline-block) elements that are contained within a parent block level element. You apply the style to the parent element.
Because ul elements are not inline elements, they will not be centered when you apply text-align: center to the parent. They are block level elements and block level elements by default take up the remaining space on that line.
To center a block-level element you can give it a specific width then you can apply margin-left: auto and margin-right: auto to the element. So, in your case if you give the <ul> element a width and set the margin-left and margin-right to auto it will become centered within its parent div. No need for text-align: center.
By default a <ul> does not contain text, but an <li> does. Therefore you can apply text-align: center to an <li> element to center the inline text inside of it.
Also, your <blockquote> elements only contain block-level elements directly: <p> and <footer>. They do not contain text as a direct child descendant. And therefore nothing will be centered inside of it. If you only had text inside of it, then the text would be centered.
Update
As per your comment on centering and left-aligning, if I am understanding you correctly you can do something like this:
<style>
#parent {text-align: center}
#parent ul {display: inline-block; text-align: left}
</style>
<div id="parent">
<ul>
<li>....</li>
<li>....</li>
<li>....</li>
</ul>
</div>
The trick here is that you need to override the text-align=center in the ul because otherwise it gets inherited from the parent div.
Try wrapping the ul in a div, give the div an id, style div using id, with 'text-align: center;'
And get rid of the ul CSS styles that you have.
<a> is positioned relatively, while <span> is nested inside it and is positioned absolutely. Yet, <span> appears below the bottom left corner of the image, instead of appearing at top left corner of it's relative parent. I can't understand why does it not ignore it's sibling's position.
Here is my code:
.pos-rel {
position:relative;
}
.pos-abs {
position:absolute;
top:0px;
right:0px;
}
<a href="#" class="pos-rel">
<img src="http://placehold.it/270x270" class="img-responsive">
<span class="label label-primary pos-abs">Overlay</span>
</a>
Picture of an expected behavior:
It is most likely that I don't understand how position:relative and position:absolute work together in this case. Can anyone explain why the behavior illustrated on the picture is not taking place?
This is due to how the display of <a> is expressed in terms of CSS. Usually, it's display: inline. Absolute positioning works quite differently when the position: relative ancestor is an inline element:
The containing block of an element is defined as follows:
If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:
In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.
The inline box generated by the <a> (to contain the <img>) is the same height as the line box that it's in, and the height of the <img>, which itself is inline, is irrelevant. So the absposed element is placed at around the same height as the line box the <img> is sitting on. The <img> is positioned the way it is because it's sitting on the baseline of the <a>.
As you can imagine, setting the <a> to display: block produces the expected behavior.
<a> is inline, you must change it to block and set width or inline-block to let it assume the width of it's contents.
Included the jsfiddle to reflect what you were aiming for: https://jsfiddle.net/gq30uct4/
NEW ANSWER:
As #ISuthan Bala wrote, <a> is inline element, so you have to add your relative class to an additional DIV inside the <a> tag:
http://codepen.io/anon/pen/VaqmWN
.pos-rel {
position:relative;
}
.pos-abs {
display: block;
position:absolute;
top:0px;
left:0px;
}
<a href="#">
<div class="pos-rel">
<img src="http://placehold.it/270x270" >
<span class="label label-primary pos-abs">Overlay</span>
</div>
</a>
In my application I have tags that can be from 5 to 15 characters. By that reason the tags width differ, but the surrounding divs increases with the parents width, not the content.
What should I put in the CSS to make the divs width adapt to the width of it's content?
Thanks in advance!
HTML
<div class="tag">
<a href="#">
<span class="content">Test album</span>
</a>
X
</div>
CSS
div.tag {
background: red;
}
Test case: http://jsfiddle.net/T4XJ3/1/
The <div> element has display:block, so it will always take the full width of their container.
You can make them "flexible" by using display: inline-block (demo).
Is this what you're looking for?
inline-block to the rescue!
div.tag {
background: red;
display: inline-block;
}
From the w3c spec:
This value causes an element to generate an inline-level
block container. The inside of an inline-block is formatted as a
block box, and the element itself is formatted as an atomic
inline-level box.
In simpler terms this means that outside of your div it acts like a span would (sizes to fit contents, flows inline in content, etc.), and inside of your div it acts like a div normally would (for positioning, sizing, padding, etc.).
I have an item on the DOM that I'd simply like to have fill its parent's width, regardless of what that is:
<div width="800">
<div class="filler"></div>
</div>
How can I specify in CSS that the filler class match the width of its parent?
.filler {
?
}
Have you tried: width: 100%; ?
Depending on what you inner item is, there are various approaches.
If it's a block-level element (a paragraph, a div, etc.), it will automatically adjust itself to fill 100% of the container's width.
If it's an inline element, too bad for you, it won't accept width:100% until you convert it to a block-level element: display:block.
Floated elements are a special case: they will only span to the width of their inner content, even if they're block level elements. They require width:100%.
Absolutely positioned elements are even tougher: they need width:100%, but the container also needs a positioning context, eg. position:relative.
Examples of all four cases: http://jsfiddle.net/dD7E4/
If the inner element is not a div and has padding or margin, flexbox might be the best solution:
<div class="container">
<div class="filler"></div>
</div>
.container {
display: flex;
}
.filler {
flex-grow: 1;
}
See also this answer about how to fill remaining vertical space.
Unless there's something stopping them, block-level elements such as div and p will always fill the entire width of their container. If you have an inline element such as a span or an a, you could style it as display: block to turn it into a block-level element, but this will also put a line break before and after it.
div is a block element and by default fill his parent.
if it doesn't you probably use float:left or float:right or display:inline or your parent is not 800px.
(maybe you should try with style="width:800px" or width="800px" instead of width="800")
I usually put a color border to see how it works.
By default it will fill its parent element's width as div is an block element.
I have the following HTML chunk:
<span class='instruction_text'>
Line 1<br>
Line 2
</span>
And the CSS declaration of instruction_text is:
.instruction_text {
margin-left: 70px;
font-style: italic;
color: #555;
}
The first line has a 70px margin as expected, but the next line starts with no indent. How can I make ALL of the lines indented?
Use a block-level element. <div> is block-level by default, but adding the CSS display:block to your instruction_text class should send you in the right direction.
Using BR tags inside a SPAN element doesn't make a lot of sense as SPAN in an inline element which means it's meant to be used in the flow of a line of text or other inline elements.
You really should be using an element that is a "block" level element like DIV or P, e.g. one that is designed to contain multiple lines of text (or inline elements).
As you'll have noticed, you CAN use a BR tag inside a SPAN and it will cause a line break, however inline elements don't play well with margins/padding etc.