CSS tricks
Thursday, February 23rd, 2006I’m trying to learn more about CSS, so here are a few tricks that I’ve picked up….
From http://phark.typepad.com/phark/2003/08/accessible_imag.html
A picture of Orion, my D&D figurine
The above image is actually an H2 text element that has been restyled to hide the text and show an image. This technique is useful for skinning a web page — you can simply put in placeholder text in <div> element with an appropriate ID. Then the CSS converts that to an image.
A block (from a div element) with position attribute bottom set to negative 10.
Note that in the previous example, there seems to be no way to push a contained box to the bottom of its container.
A block (from a div element) with float left
A block (from a div element) with float left
A block (from a div element) with float left
A block (from a div element) with float left
Next : how do you center horizontally in a box: use margin:auto;
A block (from a div element) with margin: auto
Next : How do you center vertically? The containing block must have display: table-cell and vertical-align: middle.
A block (from a div element) with margin: auto
