Am 28.12.11 11:39, schrieb Ghodmode:
On Mon, Dec 26, 2011 at 9:27 PM, Aaron Gray<aaronngray.li...@gmail.com> wrote:
Is there another way with HTML 4.01 strict to vertically and horizontally
centre an<img> within a page other than boxing it by<div>'s and turning
them into 'display: table' and 'display:table-cell', and aligning them to
center, middle ?
Hi Aaron. Use a table-based layout... well not really :D
.containing_element {
display: table-cell;
vertical-align: middle;
}
This is exactly what the OP did *not* want. Aaron was explicitely asking
for a method to vertically and horizontally center an image *without*
the use of /display: table/ or /display: table-cell/.
Here is one way that uses absolute positioning. (You need to know the
images intrinsic width and height for this.)
/* reset implicit margin/padding */
body {
margin: 0;
padding: 0;
}
/* center the image */
/* image dimensions: h: 224px, w: 300px */
img.center {
position: absolute;
top: 50%;
left: 50%;
margin-top: -112px; /* half the image height */
margin-left: -150px; /* half the image width */
}
This works by positioning the image halfway across and down the viewport
and then "pulling it back" by half its intrinsic width/height by using
negative margins.
Implicit values for margin/padding on the body element might place the
image somewhat off center, thus the reset.
hope this helps,
Jørgen
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
