Original Address: Vertical the Align-: All the To Know by You Need
Often I need to vertically align elements side by side.
I often need to vertically align elements side by side.
CSS offers some possibilities. Sometimes I solve it with float, sometimes with position: absolute, sometimes even dirty by manually adding margins or paddings.
css offer some solutions. I sometimes use the float, sometimes using position: absolute, sometimes even add margins or paddings bad manually to solve this problem.
I don’t really like these solutions. Floats only align at their tops and need to be cleared manually. Absolute positioning takes the elements out of the flow so they do no longer affect their surroundings. And working with fixed margins and paddings immediately breaks things on the tiniest change.
I do not like these solutions. Floats can only align their tops, and require manual removal of floating. Absolutely positioned elements let out of the stream, so they can no longer influence things around. Using fixed margins and paddings because of very subtle changes and break.
But there is another player here: vertical-align. I think it deserves more credit. Ok, technically, using vertical-align for layout is a hack, since it wasn’t invented for this reason. It’s there to align text and elements next to text. Nonetheless, you can also use vertical-align in different contexts to align elements very flexible and fine-grained. The sizes of elements need not to be known. Elements stay in the flow so other elements can react to changed dimensions of those. This makes it a valuable option.
But there is another solution here: vertical-align. I think it's worth more favor. Technically, using the vertical-align to hack a layout, because it was not for this reason the invention. It is used to align elements next to the text, and text. However, you can also use vertical-align align elements flexible carefully in different contexts. Without knowing the size of the element. So stay element stream element can cope with changes in the size of the other elements. This also makes it a valuable option.
Peculiarities Of Vertical-Align
But, vertical-align can be a real scumbag sometimes. Working with it can be a little frustrating. There seem to be some mysterious rules at work. For example, it might happen, that the element you changed vertical-align for doesn’t change its alignment at all, but other elements in the line do! I’m still getting dragged into the dark corners of vertical-align from time to time, tearing my hair.
However, vertical-align sometimes is really a scumbag. Use it was a bit frustrating. It seems to have some mysterious rules at work. For example, you do not change it in order to change the alignment of vertical-align elements, but other elements in this line changed. I still occasionally be dragged into the dark corners of the vertical-align, pulled my hair.
Unfortunately, most resources on the matter are somewhat shallow. Especially, if we want to use vertical-align for layout. They concentrate on the misconception of trying to vertical align everything inside an element. They give basic introductions into the property and explain how elements are aligned in very simple situations. They do not explain the tricky parts.
Unfortunately, most of the resources described in this matter are a little shallow. In particular, if we want to use vertical-align to layout. They try to focus on all elements of the vertical alignment of the interior of a misconception. They make basic introduction to the property and explain how the elements are aligned in a simple case. They do not explain that part of the complex.
So, I set myself the target to clarify the behavior of vertical-align once and for all. I ended up working through the W3C’s CSS specifications and playing with some examples. The result is this article.
So I set a goal to complete the geographical clean vertical-align behavior. I play some final specification and examples by the W3C CSS end this thing. The result is this article.
So, let’s tackle the rules of the game.
So, let's fix the rules of the game.
Requirements To Use Vertical-Align
vertical-align is used to align inline-level elements. These are elements, whose display property evaluates to
inline,
inline-block or
inline-table (not considered in this article).
Inline elements are basically tags wrapping text.
vertical-align the elements for the horizontal alignment of rows, i.e., those that display property inline, inline-block or inline-table (not considered herein) elements.
Inline element is substantially wrapped text labels.
Inline-block elements are what their name suggests: block elements living inline. They can have a width and height (possibly defined by its own content) as well as padding, a border and margin.
Inline-block elements just as their name suggests: block elements within the home row. They may have a width and height (may be defined by its own content) as well as padding, border and margin.
Inline-level elements are laid out next to each other in lines. Once there are more elements than fit into the current line, a new line is created beneath it. All these lines have a so-called line box, which encloses all the content of its line. Differently sized content means line boxes of different height. In the following illustration the top and bottom of line boxes are indicated by red lines.
Inline horizontal element disposed next to other elements within the row. Once all the elements fit the current line, it will produce a new line in the row below. All of these lines is called line box, line box contains all the contents of this line. The contents of different size means different height of line boxes. In the following figure, the top and bottom line boxes is denoted by the red line.
The line boxes trace out the field we are playing on. Inside these line boxes the property vertical-align is responsible for aligning the individual elements. So, in respect to what are elements aligned?
line boxes outline the areas we can play. In these line boxes inside, vertical-align properties responsible aligned individual elements. So, the elements are aligned on it?
About Baselines and Outer Edges
The most important reference point to align vertically is the baseline of the involved elements. In some cases the top and bottom edge of the element’s enclosing box becomes important, too. Let’s have a look where the baseline and outer edges live for each involved type of element:
Vertical alignment reference point is the most important element related to the baseline. In some cases, the top and bottom edges of the bounding box elements has become very important. Let us look at the position of the baseline and the outer edge of each element of the type involved:
Here you see three lines of text next to each other. The top and bottom edge of the line height is indicated by red lines, the height of the font by green lines and the baseline by a blue line. On the left, the text has a line height set to the same height as the font-size. The green and red line collapsed to one line on each side. In the middle, the line height is twice as large as the font-size. On the right, the line height is half as large as the font-size.
Here you can see the adjacent three lines of text. OK high top and bottom edges by a red line , said height of the font from the green line and the baseline by the blue line represents. The text of the left of the line height to the same height as the font size. The upper and lower sides of the green and red lines are superposed as a line. The middle of the line height twice the height of the font. The right side of the line height is half the height of the font.
The inline element’s outer edges align themselves with the top and bottom edge of its line height. It does not matter, if the line height is smaller than the height of the font. So, the outer edges are the red lines in the figure above.
An outer edge of the inner row of elements aligned with its line of high top and bottom edges. If the row height is less than the high fonts, it does not matter. Therefore, the outer edge of the red line is above figure.
The inline element’s baseline is the line, the characters are sitting on. This is the blue line in the figure. Roughly speaking, the baseline is somewhere below the middle of the font’s height. Have look at the W3C Specs for a detailed definition.
Baseline inline elements that piece of character sitting line . Is the blue line in FIG. Roughly speaking, the baseline is somewhere in the middle below the height of the font . Look W3C specifications about this detailed definition .
From left to right you see: an inline-block element with in-flow content (a “c”), an inline-block element with in-flow content and overflow: hidden and an inline-block element with no in-flow content (but the content area has a height). The boundaries of the margin is indicated by red lines, the border is yellow, the padding green and the content area blue. The baseline of each inline-block element is shown as a blue line.
From left to right you can see: a inline-block elements there are in-flow content (a "C"), a inline-block elements have content in-flow and overflow: hidden, a inline-block element has no in- flow content (content area but there is a high degree). margin boundary is represented by a red line, border is yellow, padding and content areas to green to blue. Each baseline inline-block element is blue line.
[ Annotation ]: If the element is floating (float: left / right), the absolute positioning (position: absolute / fixed) or is the root element (html), then it is called an element of the outer stream (out-of -flow). If the outer element is not a flow element, then it is called an element (in-flow) in the flow.
The Inline-block element’s outer edges are the top and bottom edge of its margin-box. These are the red lines in the figure.
Inline-block elements of the outer edge of the top and bottom edge of its margin-box. It is shown in red.
The Inline-block element’s baseline depends on whether the element has in-flow content:
In case of in-flow content the baseline of the inline-block element is the baseline of the last content element in normal flow (example on the left). For this last element its baseline is found according to its own rules.
In case of in-flow content but an overflow property evaluating to something other than visible, the baseline is the bottom edge of the margin-box (example in the middle). So, it is the same as the inline-block element’s bottom edge.
In case of no in-flow content the baseline is, again, the bottom edge of the margin-box (example on the right).
Baseline depending on the element Inline-block elements whether in-flow content :
There are in-flow content, baseline inline-block element is the last baseline normal stream content element (for example, the left one). For the last element, which is to determine the position of the baseline in accordance with its own rules.
There are in-flow and the content is not visible using the values of overflow, the baseline in the bottom edge of margin-box that location (e.g. the middle). Accordingly, it is the same with the bottom edge of the inline-block elements.
No in-flow content, the baseline is at the bottom edge of the margin-box that location (for example, the right side)
You’ve already seen this setting above. This time I drew in the top and bottom of the line box’s text box (green, more on this below) and the baseline (blue), too. I also highlighted the area of the text elements by giving them a grey background.
You've seen the above settings. This time I painted line box of the text box (green, far down here) and the top and bottom of the baseline (blue). I also by giving them a gray background to highlight areas of text elements.
The line box has a top edge aligned to the top edge of the top-most element of this line and a bottom edge aligned to the bottom edge of the bottom-most element of the line. This is the box indicated by the red lines in the figure above.
Line box top edge aligned with the top edge of the highest element in the row, line box bottom edge aligned with the bottom edge of the bottom element in the row. line box is outlined in red above figure that part.
The line box’s baseline is variable:
CSS 2.1 does not define the position of the line box's baseline. — the W3C Specs
line box of baseline variables:
CSS 2.1 does not define the position of the line box baseline. - the W3C specification
This is probably the most confusing part, when working with vertical-align. It means, the baseline is placed where ever it needs to be to fulfil all other conditions like vertical-align and minimizing the line box’s height. It is a free parameter in the equation.
This is probably the most confusing part. This means that the baseline is placed where it can achieve all of the conditions (like vertical-align, minimizing the line box height) of. It is a free parameter equation.
Since the line box’s baseline is invisible, it may not immediately be obvious where it is. But, you can make it visible very easily. Just add a character at the beginning of the line in questions, like I added an “x” in the figure. If this character is not aligned in any way, it will sit on the baseline by default.
Because the baseline line box is not visible, so it is not obvious in places. However, you can make it easily visible. Only the beginning of the line need to add a character, as I increased the figure "X". If this character is not aligned in any way, it will default to sit on the baseline.
Around its baseline the line box has what we might call its text box. The text box can simply be thought of as an inline element inside the line box without any alignment. Its height is equal to the font-size of its parent element. Therefore, the text box only just encloses the unformatted text of the line box. The box is indicated by the green lines in the figures above. Since this text box is tied to the baseline, it moves when the baseline moves. (Side note: this text box is called strut in the W3C Specs)
Around its base line, line box has a text box. As a text box may be placed inside the line box no inline elements aligned. Its height is equal to the font size of its parent element. Therefore, the text box just plain text line box is fenced. The box is marked with a green line above figure that out. Because this text box associated with the baseline, when the baseline moves, it moves . (Note: The text box in the W3C specification referred Strut )
Phew, this was the hard part. Now, we know everything to put things into perspective. Let’s quickly sum up the most important facts:
There is an area called line box. This is the area in which vertical alignment takes place. It has a baseline, a text box and a top and bottom edge.
There are inline-level elements. These are the objects that are aligned. They have a baseline and a top and bottom edge.
Alas, this is the hardest part. Now, we know everything. Let's quickly summarize the most important facts:
There is an area called the line box. This is a vertical region of the Qi Fasheng. It has a base, a text box and a top and bottom edges.
There are elements in horizontal rows. They are to align objects. They have a baseline and a top and bottom edges.
The Values Of Vertical-Align
By using vertical-align the reference points mentioned in the last sentence in the list above are set into a certain relationship.
By using the vertical-align, with reference to the last point in the list above mentioned a certain relationship is provided.
Aligning the Element’s Baseline Relative To the Line Box’s Baseline
baseline: The element’s baseline sits exactly on top of the line box’s baseline.
sub: The element’s baseline is shifted below the line box’s baseline.
super: The element’s baseline is shifted above the line box’s baseline.
<percentage>: The element’s baseline is shifted with respect to the line box’s baseline by a percentage relative to the line-height.
<length>: The element’s baseline is shifted with respect to the line box’s baseline by an absolute length.
With respect to the base line box element aligned with the baseline.
Baseline : Baseline baseline of the element at the top of the line box.
Sub : Baseline line box element is moved to below baseline.
<PERCENTAGE> : PERCENTAGE baseline by line-height associated element, relative to the baseline of the offset line box.
<length >: length of the baseline of the element by the absolute line box relative to baseline offset
Aligning the Element’s Outer Edges Relative To the Line Box’s Baseline
middle: The midpoint between the element’s top and bottom edge is aligned to the line box’s baseline plus half of the x-height.
The outer edges of the element with respect to the line box aligned with the baseline.
Middle : Baseline line box midpoint between both the top and bottom elements x-height plus one-half alignment.
Aligning the Element’s Outer Edges Relative To the Line Box’s Text Box
One could also list these two cases under aligning relative to the line box’s baseline, since the position of the text box is determined by the baseline.
text-top: The element’s top edge is aligned to the line box’s text box top edge.
text-bottom: The element’s bottom edge is aligned to the line box’s text box bottom edge.
Aligning the outer edges of the element with respect to the line box of the text box.
These two cases may be listed in the "baseline with respect to line box justification", 因为文本盒的位置是由line box的基线决定的.
Top-text : a top edge and a top edge line box text box element is aligned.
bottom-text : text box at the bottom edge of the bottom edge of the element is aligned with line box.
Aligning the Element’s Outer Edges Relative To the Line Box’s Outer Edges
top: The element’s top edge is aligned to the line box’s top edge.
bottom: The element’s bottom edge is aligned to the line box’s bottom edge.
With respect to the outer edge of the outer line box edge alignment element
Top : top edge and a top edge line box element is aligned.
bottom : the bottom edge of the bottom edge of the line box element is aligned.
At The formal Definition IS found in, of Course,, the W3C at The Specs.
Formally defined in the specification here W3C.
Why Vertical-Align Behaves The Way It Behaves
We can now take a closer look at vertical alignment in certain situations. Especially, we will deal with situations where things might have gone wrong.
We can now take a closer look at some cases come down to earth vertical alignment. Primarily, we will deal with those situations we may have the wrong.
Centering an Icon
One question bugging me was the following: I have an icon I want to center next to a line of text. Just giving the icon a vertical-align: middle didn’t seem to center it in a satisfying way. Have a look at this example:
One problem plaguing me: I have an icon, I would like to align the center and the center of the icon next to the text. Only a vertical-align to the icon: middle seem to not be centered in a satisfactory manner. Look at this example:
<!-- left mark-up -->
<span class="icon middle"></span>
Centered?
<!-- right mark-up -->
<span class="icon middle"></span>
<span class="middle">Centered!</span>
<style type="text/css">
.icon { display: inline-block;
/* size, color, etc. */ }
.middle { vertical-align: middle; }
</style>Here is the example again, but I drew in some auxiliary lines you already know from above:
This is still an example, but I drew some auxiliary lines.
This sheds some light on our matter. Because the text on the left isn’t aligned at all, it sits on the baseline. The thing is, by aligning the box with vertical-align: middle we are aligning it to the middle of the lower case letters without ascenders (half of the x-height). So, characters with ascenders stand out at the top.
This reveals our problems. Because the text is not aligned on the left, which is located on the baseline. The fact is, the vertical-align: middle when aligned, and it will be aligned with the intermediate lowercase letters, and not aligned with ascenders (half of the x-height). Therefore, character and standing on top of the ascenders.
On the right, we take the whole area of the font and align its midpoint vertically, too. The text’s baseline shifts slightly below the line box’s baseline to achieve this. The Result is a nicely centered text next to an icon.
On the right, we have the whole area of the mid-point font vertical centering. Baseline of the text gently moved to the baseline following line box to achieve this goal. The result is a center of text and icons perfect alignment.
Movement Of the Line Box’s Baseline
This is a common pitfall when working with vertical-align: The position of the line box’s baseline is affected by all elements in that line. Let’s assume, an element is aligned in such a way, that the baseline of the line box has to move. Since most vertical alignment (except top and bottom) is done relative to this baseline, this results in an adjusted position of all other elements in that line, too.
When using this time, this is a common trap: Location baseline line box is affected by the line of all the elements. Let us assume that an element is aligned in such a way that the baseline line box must be moved. Since most vertical alignment (except for top and bottom) with respect to the baseline, which leads to adjust the position of all other elements in the line.
Some Examples:
If there is a tall element in the line spanning across the complete height, vertical-align has no effect on it. There is no space above its top and below its bottom, that would let it move. To fulfil its alignment relative to the line box’s baseline, the line box’s baseline has to move. The short box has a vertical-align: baseline. On the left, the tall box is aligned text-bottom. On the right, it is aligned text-top. You can see the baseline jumping up taking the short box with it.
Some examples:
If there is an element of tall height across the entire line, vertical-alig no effect on it. In the space below the top of it and did not let it move. In order to achieve alignment with respect to the baseline baseline line box, line box must be moved. Short frame vertical-align: baseline. That, tall elements and text-bottom Align the left. That, tall elements and text-top Align the right. You can see that with a short baseline jump box together.
<!-- left mark-up -->
<span class="tall-box text-bottom"></span>
<span class="short-box"></span>
<!-- right mark-up -->
<span class="tall-box text-top"></span>
<span class="short-box"></span>
<style type="text/css">
.tall-box,
.short-box { display: inline-block;
/* size, color, etc. */ }
.text-bottom { vertical-align: text-bottom; }
.text-top { vertical-align: text-top; }
</style>The same behaviour shows up when aligning a tall element with other values for vertical-align.
When tall elements aligned to other vertical-align the value, the same behavior.
Even setting vertical-align to bottom (left) and top (right) moves the baseline. This is strange, since the baseline shouldn’t be involved at all.
<!-- left mark-up -->
<span class="tall-box bottom"></span>
<span class="short-box"></span>
<!-- right mark-up -->
<span class="tall-box top"></span>
<span class="short-box"></span>
<style type="text/css">
.tall-box,
.short-box { display: inline-block;
/* size, color, etc. */ }
.bottom { vertical-align: bottom; }
.top { vertical-align: top; }
</style>Even set of vertical-align bottom (left) and the top (right) moves as the baseline. This is strange, because the baseline should not be involved at all.
Placing two larger elements in a line and vertically aligning them moves the baseline where it fulfils both alignments. Then the height of the line box is adjusted (left). Adding a third element, that does not go beyond the line box’s edges because of its alignment, affects neither the line box’s height nor the baseline’s position (middle). If it does go beyond the line box’s edges, the line box’s height and baseline are adjusted, again. In this case, our first two boxes are pushed down (right).
<!-- left mark-up -->
<span class="tall-box text-bottom"></span>
<span class="tall-box text-top"></span>
<!-- mark-up in the middle -->
<span class="tall-box text-bottom"></span>
<span class="tall-box text-top"></span>
<span class="tall-box middle"></span>
<!-- right mark-up -->
<span class="tall-box text-bottom"></span>
<span class="tall-box text-top"></span>
<span class="tall-box text-100up"></span>
<style type="text/css">
.tall-box { display: inline-block;
/* size, color, etc. */ }
.middle { vertical-align: middle; }
.text-top { vertical-align: text-top; }
.text-bottom { vertical-align: text-bottom; }
.text-100up { vertical-align: 100%; }
</style>The elements of the two big points on the line, and then vertically align them in place in line with the baseline alignment of these two elements. High adjusts line box (left). Adding a third element, it is not beyond the edge line box, since its alignment will not affect the height of the line box does not affect the position of the baseline (in). If he goes beyond the end of the line box, line box height and baseline will be adjusted again. In this case, our first two boxes are pushed down (right).
There Might Be a Little Gap Below Inline-Level Elements
Have a look at this setting. It’s common if you try to vertical-align li elements of a list.
<ul>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
</ul>
<style type="text/css">
.box { display: inline-block;
/* size, color, etc. */ }
</style>Look at this setting. It is common, li elements if you try to vertically align the list.
As you can see, the list items sit on the baseline. Below the baseline is some space to shelter the descenders of a text. This is causing the gap. The Solution? Just move the baseline out of the way, for example by aligning the list items with vertical-align: middle:
<ul>
<li class="box middle"></li>
<li class="box middle"></li>
<li class="box middle"></li>
</ul>
<style type="text/css">
.box { display: inline-block;
/* size, color, etc. */ }
.middle { vertical-align: middle; }
</style>As you can see, the list of items located on the baseline. In the baseline put descenders space for text. This creates a gap. The method to solve it? Baseline position is only necessary, for example, the list items vertical-align: middle.
This scenario does not occur for inline-blocks having text content, since content already moves the baseline up.
There is already inline-blocks of the scene will not happen, because the content has moved up the baseline for.
A Gap Between Inline-Level Elements Is Breaking the Layout
This is mainly a problem of inline-level elements themselves. But since they are a requirement of vertical-align, it is good to know about this.
This is an inline horizontal element of the main issues. But because they are a prerequisite for vertical-align, it's best to know this.
You can see this gap in the former example between the list items. The gap comes from the white-space between inline-elements present in your mark-up. All white-space between inline-elements is collapsed into one space. This space gets in the way, if we want to place two inline elements next to each other and giving them width: 50%, for example. There is not enough space for two 50%-elements and a space. So the line breaks into two lines destroying the layout (left). To remove the gap, we need to remove the white-space, for example with html comments (right).
<!-- left mark-up -->
<div class="half">50% wide</div>
<div class="half">50% wide... and in next line</div>
<!-- right mark-up -->
<div class="half">50% wide</div><!--
--><div class="half">50% wide</div>
<style type="text/css">
.half { display: inline-block;
width: 50%; }
</style>You can see in the previous example, the gap between the item list. From the clearance gap between the inner row of elements present in the tag . All elements of the gap between the inner row is folded into a space. If we want to within two rows of elements together, and gave them 50% of the width of the spaces will get in the way. It is not enough space to put two elements and 50% of the width of a space. Therefore, this line will destroy the original layout becomes two lines (left). To eliminate the gap, we need to remove the blank, for example, Notes html (right).
Vertical-Align Demystified
Yea, that’s it. It is not very complicated once you know the rules. If vertical-align does not behave, just ask these questions:
Where is the baseline and top and bottom edge of the line box?
Where is the baseline and top and bottom edge of the inline-level elements?
This will corner the solution to the problem.
Yes, that's it. Once you know the rules, it is not very complicated. Vertical-align performance if not, ask these questions:
Baseline, where the top and bottom edge of the line box in?
Where baseline, top and bottom edges of the elements in a horizontal row?
This will solve that problem.
If the above translation inappropriate, please correct me!