I am new to the world of coding as well as CSS and recently came across the property vertical-align. Having read a number of articles on what it is, I am still clueless on what it is for and when do you use it?
My understanding is that it is used for inline elements such as text, images, etc as well as text or other inline elements in a table. They cannot be used for block element such as div, h1, etc.
If my understanding is right, apart from aligning text vertically to say an image or using subscript or superscript, what other purpose does it serve?
It's used the vertical align inline elements indeed. Block level elements will ignore this property. So your understanding is right.
This blog gives some background information on vertical-align with some examples. It's mainly used to vertically position an image in a line of text. Or to replace the valign attribute on tablecells.
So it seems you are understanding it quite right. See w3schools for the details on the vertical-align property.
Just to be clear; do not try to use vertical-align to position a blocklevel element like a div. It will not work, as you already mentioned, it's for inline elements like images in a line of text. Using display: table-cell; and vertical-align on an element is a hack, please use other CSS techniques to vertically align stuff in an div whenever possible.
It's always worth reading the specs if you want to learn about a specific property:
http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align
A common use case is vertical centering (in combination with display: table-cell):
http://jsfiddle.net/7eTb2/
div {
background: #ccc;
width: 200px;
height: 300px;
padding: 5px;
display: table-cell;
vertical-align: middle
}
It's somewhat difficult to vertically center without using this technique.
Another common use case is when it comes to elements that are inline or inline-block.
See here for examples of what happens with different vertical-align values:
http://www.brunildo.org/test/inline-block.html
Another good link to read: http://css-tricks.com/what-is-vertical-align/
However, it's real use is getting me upvotes, see:
https://stackoverflow.com/search?tab=votes&q=user%3a405015%20%22vertical-align%3a%20top%22
:)
Others have been mostly correct about vertical-align. The reality is that it works, just not how you think. It's for inline elements, not block elements.
In this case, a fiddle is worth a thousand words. :)
http://jsfiddle.net/JJfuj/
vertical align, by the W3C and by how most(tm) interpret it, is only used/takes affect in elements that are table-cells (<td>), and on some browsers, elements with the display: table-cell declaration.
The rest of the time, it is largely disregarded by browsers.
Vertical align is for just what it sounds like. It aligns the element vertically within the parent object; however, not all browsers interpret it the same.
Here's a little more in-depth information on the parameter values available.
Related
Bear with me, I will now post a dumb question. Being an amateur at web-design, I don't fully comprehend CSS. Specifically, how to arrange objects in the horizontal plane.
Right now, the dashed <'p>' box is below the empty <'div>' box. I want to put them next to each other, horizontally. How to go about it?
<html><head><style>
#div1
{width:400px; height:75px;border:4px solid;}
</style></head><body>
<div id="div1"></div>
<p style="border-style:dashed;border-width:2px;height:30px;width:396px;text-align:center;">Move me</p>
</body></html>
Don't feel bad that you haven't grasped CSS layout yet – it has been a long time coming in terms of standards support, so most methods today use slightly hacky methods to acheive it, and it's not always self-evident how they work or why.
Blocks by default stack vertically, so you want to change the flow to run horizontally for a specific part.
The proper "modern CSS way" would be to use flexbox, which is specifically a layout tool for these types of situations (and more). The caveat is browser support – IE10 and above, but otherwise most every browser supports it.
To lay something out horizontally with flexbox, you'd tell the parent to become a horizontally oriented container. In your case, it might therefore be a good idea to wrap the two elements in another element:
<div class="wrapper">
<div id="div1"></div>
<p>Move me</p>
</div>
You then tell the wrapper to become a "flex container", where the default mode is to flow boxes horizontally rather than vertically:
.wrapper {
display: flex;
}
There have historically been a couple of experimental flexbox implementations with different syntax, so that's something to be aware of too (see example later).
The next step would be to size the boxes, if you want them to be sized other than according to content – that would be the next step in learning about flexbox. :-)
The first thing you will need to know is that they will still react to the width property in this situation, and otherwise stretch to become equally tall.
If you want wider browser support, you can combine flexbox with other methods that aren't as fit for this exact purpose but still work – floats or inline block comes to mind. The nice thing about flexbox is that it ignores the display mode and float properties of its children. This means that we can combine old and new techniques.
Floats are originally intended to position images or other figures to the right or left in blocks of text, for example, but can be used to create whole layouts with a bit of work. They have some complex behaviors that take a while to grasp. For example, since floats stick out of their container vertically by default, you usually need to add something that makes the wrapper enclose the floats – the easiest way is probably to apply overflow: hidden to the wrapper.
Inline blocks are basically to allow block level elements in the flow of text, but since text flows horizontally (in English, at least) you can co-opt them to create full horizontal layouts as well. The downside is that any whitespace (including linebreaks) in the HTML source will create whitespace between the horizontal items.
If you go the float route, the example code could look something like this:
.wrapper {
/* various flexbox syntaxes, old */
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
/* modern flexbox syntax */
display: flex;
overflow: hidden; /* contain floats */
}
.wrapper p,
#div1 {
float: left; /* will be ignored by modern browsers */
}
You can set display (inline, or inline-block)
An inline element does not start on a new line and only takes up as
much width as necessary.
CSS
#div1, p{
display: inline-block;
}
DEMO HERE
You should set display to inline-block for them. Check this fiddle.
Also you may set them vertical-align: top (look at fiddle again) and they'll be aligned to top.
Right now <p> a little bit below <div>. Set margin for p to 0 for change it.
Use float:left for the first div
{width:400px; float:left; height:75px;border:4px solid;}
The way I personally would do this is to add a wrapper to both of these elements and align them textually with text-align
<div id="wrapper">
<div id="div1"></div>
<p style="border-style:dashed;border-width:2px;height:30px;width:396px;text- align:center;">Move me</p>
</div>
and then add some CSS to that wrapper:
#wrapper {
text-align:center;
}
Is there a practical difference between whether a left-floated element (say, and image) has display: inline-block; applied to it, as opposed to leaving the default display: block; rule applied?
In other words, what's the difference between:
<div style="float: left; display: inline-block;">text</div>
and
<div style="float: left; display: block;">text</div>
?
An answer by #thirtydot might help you... Question's link
I just found out that floating an
element will also make it a block,
therefore specifying a float property
and display:block is redundant.
Yes, display: block is redundant if you've specified float: left (or right).
(What would happen if you tried to
specify display:inline and float:left?
)
display: inline will not make any difference, because setting float: left forces display: block "no matter what":
http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo
Otherwise, if 'float' has a value
other than 'none', the box is floated
and 'display' is set according to the
table below.
To summarize said table: float = display: block.
However, your specific example of float: left; display: inline is useful in one way - it fixes an IE6 bug.
Are there any other examples of
redundant combinations to watch out
for? block & width ? etc,
Some examples:
If you set position: absolute, then float: none is forced.
The top, right, bottom, left properties will not have any effect unless position has been set to a value other than the default of static.
Is there a tool that can check for
such things?
I don't think so. It's not something that is ever needed, so I can't see why anybody would have written such a tool.
You don't have to specify a float: left and a display: inline-block for the same element, you use one or the other, not both. Float is used to float text around elements, its not the best weapon to choose when doing a layout. Go with display: block, and inline-block.
http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/
Block elements — form boxes according to the css box-model. They have width, height, padding, border, and margin and they stack vertically on top of each other.
Inline elements — don’t form boxes. They sit horizontally next to each other.
Inline-block elements — act like block elements on the inside where they form boxes. On the outside they act like inline elements sitting horizontally next to each other instead of stacking on top of each other.
A good resource: http://learnlayout.com/inline-block.html
According to SitePoint:
If you’re new to CSS layouts, you’d be forgiven for thinking that
using CSS floats in imaginative ways is the height of skill. If you
have consumed as many CSS layout tutorials as you can find, you might
suppose that mastering floats is a rite of passage. You’ll be dazzled
by the ingenuity, astounded by the complexity, and you’ll gain a sense
of achievement when you finally understand how floats work.
Don’t be fooled. You’re being brainwashed.
http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
When you use float: left; almost any elements behave as a block element. So there is no any difference in this particular case.
Since I am having trouble with Firefox about positioning a block element by nature (header) to be inline by using display:run-in; i'm asking you for your help ! been searching for quite some time now and I cant find which CSS method could be used instead of just applying display:run-in; to the element, which is supported in all the major browsers. It is crucial that i position the element this way.
Anyone knows a method how to do this ?
If you'd like to display your element as a block element, but would position it inline, then
display: inline-block;
will do the trick for you.
The MDN still lists run-in as an experimental value, so we shouldn't be too surprised if it doesn't fully function in Firefox at this time.
As for options, there are at least two you could use: display: inline and display: inline-block.
Inline might suffice if you don't need the properties of a block element on your header. Inline-block keeps it as a block element, so you can still do nice things like give it width, height, margin and so on.
View them on JSFiddle.
Alright i found a solution ! :) Using display:inline; in a combination with float:left; will make a block element by nature use space only as much as he needs, not full 100% of its parent element.
There is just one problem with this tecnhique if you are using bigger font for lets say a heading and want to add a paragraph right after it (on the same line). If the headings font-size is a bit bigger, heading could take 2 or even more lines of space in height where paragraphs text should be,and you will have a small gap between header and another row of paragraph under it. The solution is to add display:block; and margin-top:Xpx; to the paragraph element to align it as needed.
What is my misunderstanding about the way that vertical-align:middle; works?
I have posted (http://jsfiddle.net/D6RwZ/) some code which I would expect to vertically align a red rectangle in a blue rectangle, but it doesn't look like that.
vertical-align:middle won't work on div (block element). You can refer here for details.
If you want to vertical align, I think the only option is using margin/padding with appropriate parameters.
Vertical-align only works on inline images and display: table-cell.
I've used this solution a few times and it works quite well but takes some work. If you're working with fixed size elements position absolute is by far the simplest. Dynamic sized elements and vertical centering can be very tricky, lots of browser quirks to deal with.
vertical-align can only be applied to elements with:
display:table-cell in order to vertically align the contents of the element.
display:inline or display:inline-block in order to vertically align the element within the text line that contains it
A cheap hack with the latter : http://jsfiddle.net/8bZQS/
How do you choose when to use DIV and when SPAN, to wrap something?
Many time when we make PSD 2 HTML, in some conditions to get any effect or to wrap something to get needed effect, we use div or span.
And I know div is block level element and span is inline level element and we can change display properties through CSS. and I also know div cannot come inside span.
What are cases when you use div as a display:inline and span as a display:block? and should we try to avoid those scenarios? is this semantically incorrect?
and when we use blank div or span (no content inside) to get some effect, than which is correct?
As you note, you should use divs as dividers of blocks, and spans for marking inline content.
And yes, you should try to avoid changing the display types of them.
Regarding blank element, div is better as you can define its width and height while for span it won't have proper effect.
Most simple example to prove this point can be seen in action here: http://jsfiddle.net/yahavbr/4DZkV/
This is still a good question but the suggested answers only seem to address part of the question. There are three CSS display types, which help put this into perspective: inline, block, and inline-block. If you read this other Stackoverflow topic, CSS display: inline vs inline-block, I think you'll get some useful guidelines. For example, if you need to ensure the element has distinct top and bottom padding and margins, then it probably needs to be a div (with CSS style inline-block), otherwise a span is probably a better choice.