This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
ideas:centering [2008/02/02 15:35] – fixed a type in the title for center-x and center-y bkemper | 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 28: | Line 29: | ||
This leaves one way left to keep the object centered when overflow is set to “visible” (the default) or “hidden”: | This leaves one way left to keep the object centered when overflow is set to “visible” (the default) or “hidden”: | ||
- | |||
==== Proposals ==== | ==== Proposals ==== | ||
Line 57: | 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 64: | 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 | ||
Line 110: | Line 135: | ||
* The way “left”, “right”, | * 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. | * 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. | ||
- | |||
- |