This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
ideas:centering [2007/12/25 22:07] – fantasai | ideas:centering [2021/10/01 15:22] (current) – [Centering Blocks] fantasai | ||
---|---|---|---|
Line 3: | Line 3: | ||
A common request is the ability to center blocks. CSS has some capabilities for this, however they are very limited, especially in the vertical direction. | A common request is the ability to center blocks. CSS has some capabilities for this, however they are very limited, especially in the vertical direction. | ||
+ | < | ||
+ | Update: More powerful alignment capabilities have now been added to CSS in the [[https:// | ||
+ | </ | ||
===== Horizontal Centering ===== | ===== Horizontal Centering ===== | ||
Line 9: | Line 11: | ||
Horizontal centering can be accomplished in most cases by using '' | Horizontal centering can be accomplished in most cases by using '' | ||
- | * Auto margins can't center an element that is larger than its containing block: in that case it aligns to the " | + | * Centering with 'auto' margins |
* Centering with margins doesn' | * Centering with margins doesn' | ||
* Centering with auto margins can't be combined with side margins. | * Centering with auto margins can't be combined with side margins. | ||
- | * Centering with 'auto' margins | + | * Auto margins can't center an element that is larger than its containing block: in that case it aligns to the " |
+ | ==== Margins and Overflow ==== | ||
+ | One thing about the behavior of the “< | ||
+ | Most would agree that the meaning of “overflow” and “margin” on centered objects should be the same on the left edges as they are on the right, in order for centered object to retain their symmetrical placement. | ||
+ | For margins, this is assuming that margins are to have some meaning for values other than “auto”. But the margins on a centered object are only apparent if the object and margins fit snuggly within its container. So in order to remain centered and show both margins (without overflowing to the left and right equally), there are two options: | ||
+ | |||
+ | - The centered object would have to be reduced in width enough to fit within its parents padding box. This is not an attractive option if the centered box has a fixed or minimum width greater than the parent. | ||
+ | - The parent object grows in width enough to accommodate the centered item, like “shrink to fit” in reverse (“grow to fit’). This second option would be more appropriate as a value to overflow, such as “overflow: | ||
+ | |||
+ | So, without shrinking the width of a child box that does not want to be shrunk, there is no reasonable way to show the margins when the centered object is larger than its container, unless the container has an overflow property that allows it, such as (theoretically) “overflow: | ||
+ | |||
+ | This leaves one way left to keep the object centered when overflow is set to “visible” (the default) or “hidden”: | ||
==== Proposals ==== | ==== Proposals ==== | ||
Line 21: | Line 34: | ||
=== position: center === | === position: center === | ||
- | Ian and Tantek have a [[http:// | + | Ian and Tantek have a [[http:// |
Line 33: | Line 46: | ||
* Another set: '' | * Another set: '' | ||
* A more complex set that includes '' | * A more complex set that includes '' | ||
+ | * Any of the above sets with percentages as an added possibility. | ||
* What the property is named. '' | * What the property is named. '' | ||
* Whether alignment triggered by this property is " | * Whether alignment triggered by this property is " | ||
* If the property triggers " | * If the property triggers " | ||
- | * If the property does not trigger " | + | * If the property does not trigger " |
* How this alignment interacts with the current margin calculations. Possibilities include: | * How this alignment interacts with the current margin calculations. Possibilities include: | ||
* '' | * '' | ||
Line 43: | Line 57: | ||
* alignment replaces specified side margins with '' | * alignment replaces specified side margins with '' | ||
* alignment shifts the margin box, leaving specified margins intact | * alignment shifts the margin box, leaving specified margins intact | ||
+ | |||
+ | === block-align property === | ||
+ | |||
+ | Its been proposed that a property called “block-align” would be useful for centering block level content. Vadim Plessky mentioned it in 2001 ([[http:// | ||
+ | |||
+ | Given that CSS already has a property called “text-align” to horizontally align line boxes, “block-align” would logically be analogous to that, but for block level content. Given that “text-align” is well documented and well understood, having a block level version call “block-align” would lead to easy understanding of what it does in turn. This helps solidify the answers to the similar " | ||
+ | |||
+ | == “Block-align’ would also achieve the goal of replicating the desired behavior of the “< | ||
+ | |||
+ | A primary feature of the “< | ||
+ | |||
+ | Block-align achieves this, because, like text-align, it only affects the horizontal position of its **descendants** (via the distribution of any “left over” white space available horizontally for each of those line block descendants). Just as setting “text-align” on a “P” tag does not affect the horizontal position of the paragraph within its parent, setting “block-align” on a DIV would not affect the horizontal position of the DIV within its parent. This allows more flexibility for that DIV, as its horizontal position can be determined in ways that are already available (margins, floats, positioning) or by the block-align property of its parent. | ||
+ | |||
+ | Without this “descendant-only” aspect, a separate, intermediate block would be required in order to have a block level alignment on a parent that was different from that of its descendants. Requiring such an intermediate element with no semantic meaning of its own, that exists solely to separate the alignment of a block from the alignment of its descendants, | ||
+ | |||
+ | To achieve centering of text and blocks, as is achieved by “< | ||
+ | |||
+ | == Other values: == | ||
+ | The default value of block-align is “left” (when the text-direction is LTR) or “start”, | ||
+ | |||
+ | When thought of this way (as a property whose default value describes the existing behavior of block alignment), it is clear how the property would interact with margins. Descendants with margins set to auto would not have their centered alignment overridden by the block alignment of their parent (whatever its value), just as they are not currently. Likewise, the current behavior makes it clear that an object with “block-align: | ||
+ | |||
+ | Floated items within a “block-align: | ||
+ | |||
===== Vertical Centering ===== | ===== Vertical Centering ===== | ||
+ | |||
==== Problems ==== | ==== Problems ==== | ||
Line 50: | Line 89: | ||
Vertical centering currently cannot be done in CSS except for | Vertical centering currently cannot be done in CSS except for | ||
- | * absolutely-positioned elements (using margin: auto) | + | * absolutely-positioned |
* contents of table cells | * contents of table cells | ||
The main request is to vertically center the contents of a box, as can be done with '' | The main request is to vertically center the contents of a box, as can be done with '' | ||
- | ==== Use Cases ==== | + | |
==== Proposals ==== | ==== Proposals ==== | ||
Line 61: | Line 101: | ||
=== position: center === | === position: center === | ||
- | Ian and Tantek have a [[http:// | + | Ian and Tantek have a [[http:// |
+ | |||
+ | ===== Positioned Centering ===== | ||
+ | |||
+ | Positioning objects via the “position” property differs from just moving the object’s edges via “margin” in that positioned objects are either taken out of the flow (“position: | ||
+ | |||
+ | The need to center objects in a non-positioned context has little bearing on objects that are positioned. “Auto” left and right margins have no effect on the position of absolutely positioned items, and " | ||
+ | |||
+ | However, there is a way to set the absolute position of an object half way across a page or half way deep in a page: by setting one of its edges to “50%”. The problem is that this only centers that one edge (horizontally if set on “left” or “right”, | ||
+ | |||
+ | ==== Proposals ==== | ||
+ | |||
+ | === position: center === | ||
+ | Ian and Tantek have a [[http:// | ||
+ | |||
+ | === center-x and center-y properties === | ||
+ | [[http:// | ||
+ | |||
+ | Because the widths of positioned items are determined prior to determining where they will be drawn, and because they are removed from the flow, this proposal would have no greater effect on progressive rendering than when providing a value to the edge-based properties, such as “right” or “bottom”. | ||
+ | |||
+ | Setting “center-x” in combination with a side edge would be analogous to providing two sides edges to determine the width. For instance, with two side edges, the width is calculated as (right pixels – left pixels = width pixels). To determine the width with just a side edge and a center-x, there is a similar subtraction that is then doubled for the width (and the apposing edge becomes a calculated value). Given a left and center-x value, the width calculation becomes ((center-x pixels – left pixels) * 2 = width pixels ), and the calculation for “right” is (left pixels + width pixels). Vertical combinations work the same way with center-y. | ||
+ | |||
+ | Because this proposal adds two simple properties (similar to existing properties) that work with existing values, they can be used in the same way as existing edge properties within all the existing positioning schemes. For instance, with “position: | ||
+ | |||
+ | This proposal is also not limited to centering of objects. As with the other edge-based properties, an author could set the center of an object to other values besides just the center of its container. For instance the author could set “center-y” to “25%” in order to have the center of it be at 1/4 of its container’s height (regardless of the positioned object’s height). Or several objects of varying widths could have “center-x” set to “12em” and be center aligned at that position, even if they did not have the same containing block. | ||
+ | |||
+ | The proposal also includes a shorthand property (“center”) that would combine “center-x” and “center-y”, | ||
+ | |||
+ | Unsettled detail: | ||
+ | |||
+ | Should the center be “0”, or should it be “50%”? There is precedent for both ways of thinking: | ||
+ | * The way “left”, “right”, | ||
+ | * It may be more intuitive to think of the center as being “50%”, as with “background-position” or “top” or “left”. However, this may make the values for “right” and “bottom” more confusing for novices. |