CSS VERTICAL-ALIGN
Element content is typically vertically centered on a rendered line (with extra line-height amounts distributed equally on the top and bottom.) This property allows in-line content boxes to be vertically aligned with respect to several different criteria on a rendered line.
Example
img.left {
vertical-align: top
}
Possible Values
inherit: Explicitly sets the value of this property to that of the parent.
baseline|middle: baseline – Aligns the baseline of the current element with the baseline of the parent element box. If the current element does not have a baseline, the bottom of the current element’s box should be used. middle – Aligns the vertical midpoint of the current element box with the baseline plus half the x-height of the parent.
top|bottom: top – Aligns the top of the current element with the top of the tallest element on the currently rendered line. bottom – Aligns the bottom of the current element with the bottom of the lowest element on the currently rendered line.
text-top|text-bottom: text-top – Aligns the top of the current element with the top of the parent element’s font. text-bottom – Aligns the bottom of the current element with the bottom of the parent element’s font.
super|sub: super – The baseline of the current element box is aligned to the baseline of other superscripted elements in the parent element’s box. sub – The baseline of the current element box is aligned to the baseline of other subscripted elements in the parent element’s box.
[length]: This specifies an exact distance to raise or lower the current element from the default ‘baseline’ value. Positive values are above the baseline, while negative values are below.
[percentage]: This specifies a distance to raise or lower the current element from the default ‘baseline’ value. Positive percentages are above the baseline, while negative values are below. The percentage value is relative to the current element’s ‘line-height’ property.
13 Responses
This property is an epic failure.
+1 about the epic failure of this property.
I agree that this property fails most of the time but I think part of the solution lies in measuring the baseline from the top, not from the bottom. i.e. The the default baseline is the baseline of the first line from the top in a multiline element.
Example
Label => Line1
Line2
Line3
Today it does:
Line1
Line2
Label => Line3
Juest correcting the above layout:
Mt proposal is:
] Label => Line1
] Line2
] Line3
Today it does:
] Line1
] Line2
] Label => Line3
Vertical positioning is the biggest black eye of css.
You guys sweep this like a garbage under a rug pretending all is peachy.
Well it is not!
Shame!
+1 to the failure of this property. Like Jeffy said Shame on you!
i agree with the epic failure of this styling, but guys this isn’t the Official CSS3 website. don’t go blaming them for the poor design. sheesh.
Yes I agree this property is an epic failure since it only works for images and tables.
You can still use it on a Div tag though if you use the property “display:table-cell;” with it, Hope that helps others.
I used to think this property is an epic failure too. But I realized the documentation is an epic failure. Vertical alignment is relative to other elements on the same line, used mostly for inline elements, not block elements.And you have to use it with line-height and it automatically adjusts to the highest element on the line, for example an image on the same line with a height of more than the font-size. It takes a lot of playing around with. But believe it or not, it does work, but it’s horribly non-intuitive.
You can’t do what people hope to accomplish with this property. However, I have had luck by putting the characters I want to raise/lower in a tag such as Regular characters are higher than lowered characters in this paragraph.
Ugh. I don’t share HTML on sites like this often, so I didn’t anticipate my tags becoming useless. Anyway, I have used Span tags with CSS styles… position: relative; bottom: +/- whatever; to raise or lower characters.
There really should be an easy way to vertically align block elements by now. If they don’t sort this with CSS3 then they really have missed a trick.
Playing around with positioning or using display:table-cell is a terrible way to do this when a simple solution should exist.
The work around I have used is to use a new div that lines with the image and add padding-left or padding-left to achieve, I think what the “vertical-align” is supposed to do, I might add I wish it would work.