| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| ideas:centering [2008/02/02 13:28] – bkemper | ideas:centering [2021/10/01 15:22] (current) – [Centering Blocks] fantasai |
|---|
| 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. |
| |
| | <note> |
| | Update: More powerful alignment capabilities have now been added to CSS in the [[https://www.w3.org/TR/css-align/|Box Alignment module]]. |
| | </note> |
| |
| ===== Horizontal Centering ===== | ===== Horizontal Centering ===== |
| |
| This leaves one way left to keep the object centered when overflow is set to “visible” (the default) or “hidden”: Centered objects should overflow on the left and right equally. Any centering scheme to be considered will have to decide either to have this feature (so that no matter how a block is overflowed, the content remains centered within its parent), or to more closely replicate legacy behavior of tags like “<CENTER>”. | This leaves one way left to keep the object centered when overflow is set to “visible” (the default) or “hidden”: Centered objects should overflow on the left and right equally. Any centering scheme to be considered will have to decide either to have this feature (so that no matter how a block is overflowed, the content remains centered within its parent), or to more closely replicate legacy behavior of tags like “<CENTER>”. |
| |
| |
| ==== Proposals ==== | ==== Proposals ==== |
| * alignment replaces specified side margins with ''auto'' as appropriate to effect specified alignment | * alignment replaces specified side margins with ''auto'' as appropriate to effect specified alignment |
| * 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://lists.w3.org/Archives/Public/www-style/2001Oct/0091.html|here]] and [[http://lists.w3.org/Archives/Public/www-style/2001Oct/0145.html|here]]), and more recently David Baron brought it up as a way to separate the line block centering behavior of “<CENTER>” (which already exists as “text-align:center”) from its block aligning behavior ([[http://lists.w3.org/Archives/Public/www-style/2008Jan/0441.html|here]]). |
| | |
| | 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 "alignment" property proposed above. |
| | |
| | == “Block-align’ would also achieve the goal of replicating the desired behavior of the “<CENTER>” tag: == |
| | |
| | A primary feature of the “<CENTER>” tag (that is not currently available to CSS) is that it centers its descendants' blocks. But it does so by adding another element to the HTML between the container (which may already have styling of its own, including auto margins or float or absolute positioning), and the blocks that are to be centered. To reproduce the “ descendant block centering” aspects of the “<CENTER>” tag, without requiring an intermediate block, the property should be settable on any block without affecting the alignment or position of that block itself. |
| | |
| | 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, runs counter to the reasoning that lead to the deprecation of the “<CENTER>” element. |
| | |
| | To achieve centering of text and blocks, as is achieved by “<CENTER>” (and other constructs, such as “<TD align=center>”), an author would set the values of both “text-align” and “block-align” to “center”. Because the two properties are separate, an author would have the freedom to set them to different values too. For instance, a centered layout could be achieved with “block-align: center”, but the text within that layout could be flush left with “text-align: left”. |
| | |
| | == Other values: == |
| | The default value of block-align is “left” (when the text-direction is LTR) or “start”, which would mimic current behavior of where blocks are drawn. A value of “right” or “end” (when the text direction is LTR) would mimic the current block aligning behavior of a RTL text direction. |
| | |
| | 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: left” would still be subject to being centered if its right and left margins were set to auto, and thus, the property only affects the descendants of the block it is set upon. |
| | |
| | Floated items within a “block-align: center” block would behave as usual, and a block that came immediately after the float (in the same block as the float), if it fit, would be centered in the remaining space. |
| | |
| |
| ===== Vertical Centering ===== | ===== Vertical Centering ===== |
| | |
| |
| ==== Problems ==== | ==== Problems ==== |
| 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 replaced elements (using margin: auto) |
| * contents of table cells | * contents of table cells |
| |
| Ian and Tantek have a [[http://lists.w3.org/Archives/Public/www-style/2004Jan/0218.html|position:center]] proposal that does both horizontal and vertical centering via a new value (“center”) for the “position” property. This value would be similar to “absolute”, but would automatically center the object it was set on. Because it is similar to, but different from, position:absolute, it changes the effect of other properties, such as the 4 edge properties (right, left, top, and bottom). For instance, the default value of “auto” on these properties with “position:absolute” means (roughly) “don’t move from their original position”, but with “position:center” it means “move to the center”. This implies a limit on the ability of the author to center a positioned object in just one direction. | Ian and Tantek have a [[http://lists.w3.org/Archives/Public/www-style/2004Jan/0218.html|position:center]] proposal that does both horizontal and vertical centering via a new value (“center”) for the “position” property. This value would be similar to “absolute”, but would automatically center the object it was set on. Because it is similar to, but different from, position:absolute, it changes the effect of other properties, such as the 4 edge properties (right, left, top, and bottom). For instance, the default value of “auto” on these properties with “position:absolute” means (roughly) “don’t move from their original position”, but with “position:center” it means “move to the center”. This implies a limit on the ability of the author to center a positioned object in just one direction. |
| |
| === position: center-x and center-y === | === center-x and center-y properties === |
| [[http://lists.w3.org/Archives/Public/www-style/2008Jan/0166.html|A simpler solution]] is to define two new properties that are extremely similar to the very well defined edge properties (right, left, top, and bottom). Thus, center-x would work the same as “left” and “right”, except that it would be the center of the object that was positioned horizontally instead of one of those two edges. Similarly, center-y would work the same as “top” and “bottom”, except that it would be the center of the object that was positioned vertically instead of one of those two edges. | [[http://lists.w3.org/Archives/Public/www-style/2008Jan/0166.html|A simpler solution]] is to define two new properties that are extremely similar to the very well defined edge properties (right, left, top, and bottom). Thus, center-x would work the same as “left” and “right”, except that it would be the center of the object that was positioned horizontally instead of one of those two edges. Similarly, center-y would work the same as “top” and “bottom”, except that it would be the center of the object that was positioned vertically instead of one of those two edges. |
| |
| * The way “left”, “right”, “top”, and “bottom” work is that when their value is set to zero, their namesake edge is set flush to the same edge of their containing block. Thus, “bottom:0” means that the bottom edge is at the bottom edge of its containing block. To follow this same logic, “center:0” should put the center of the object at the center of its containing block. | * The way “left”, “right”, “top”, and “bottom” work is that when their value is set to zero, their namesake edge is set flush to the same edge of their containing block. Thus, “bottom:0” means that the bottom edge is at the bottom edge of its containing block. To follow this same logic, “center:0” should put the center of the object at the center of its containing block. |
| * 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. |
| |
| |
