Re: [css-d] Vertically centreing in Strict HTML 4.01
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;
}
vertical-align only works on table cells and other elements that have
display:table-cell. Support is pretty good. It should be IE8+ and
all other major browsers.
I'd also recommend reading about anonymous table objects (
http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes ) that can be
created when you use display:table-cell. They can surprise you when
you're trying to line things up.
references:
http://www.quirksmode.org/css/display.html#t06
http://www.w3.org/TR/CSS21/visuren.html#propdef-display
http://www.w3.org/TR/CSS21/tables.html#table-display
http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes
Many thanks in advance,
Aaron
--
Ghodmode
http://www.ghodmode.com/blog
__
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/
Re: [css-d] Vertically centreing in Strict HTML 4.01
Am 28.12.11 11:39, schrieb Ghodmode:
On Mon, Dec 26, 2011 at 9:27 PM, Aaron Grayaaronngray.li...@gmail.com wrote:
Is there another way with HTML 4.01 strict to vertically and horizontally
centre animg within a page other than boxing it bydiv'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/
Re: [css-d] Vertically centreing in Strict HTML 4.01
On Wed, Dec 28, 2011 at 8:20 PM, Joergen W. Lang joergen_l...@gmx.de wrote:
Am 28.12.11 11:39, schrieb Ghodmode:
On Mon, Dec 26, 2011 at 9:27 PM, Aaron Grayaaronngray.li...@gmail.com
wrote:
Is there another way with HTML 4.01 strict to vertically and horizontally
centre animg within a page other than boxing it bydiv'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/.
Yes you're absolutely right. I don't know how I missed that. I'm
sorry for my misunderstanding.
__
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/
