This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| ideas:centering [2008/02/02 16:13] – 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 74: | Line 75: | ||
| == Other values: == | == Other values: == | ||
| - | The default value of block-align is “left” (when the text-direction is LTR), or “start”, | + | 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: | 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: | ||
| Line 82: | Line 83: | ||
| ===== Vertical Centering ===== | ===== Vertical Centering ===== | ||
| + | |||
| ==== Problems ==== | ==== Problems ==== | ||
| Line 87: | 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 | ||