Home Specs Ideas Testing About
You are here: CSS Working Group Wiki » Ideas and Resolutions » Centering Blocks

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
ideas:centering [2008/02/02 16:06] – bkemperideas: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.
  
- +<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 =====
Line 28: Line 29:
  
 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 ====
Line 60: Line 60:
 === block-align property === === 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 (here and here), and more recently David Baron brought it up as a way to separate the block centering behavior of “<CENTER>” (which already exists as “text-align:center”) from its block aligning behavior (here).+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. 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.
Line 75: Line 75:
  
 == Other values: == == 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 behavior of a RTL text direction. +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.  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. 
Line 83: Line 83:
  
 ===== Vertical Centering ===== ===== Vertical Centering =====
 +
  
 ==== Problems ==== ==== Problems ====
Line 88: 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 replaced elements (using margin: auto)
   * contents of table cells   * contents of table cells
  
Line 134: Line 135:
   * 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.
- 
- 
 
ideas/centering.1201997208.txt.gz · Last modified: 2014/12/09 15:48 (external edit)
Recent changes RSS feed Valid XHTML 1.0 Valid CSS Driven by DokuWiki