Sorry! I've been messing around with my own tests too much... here's the public one: http://www.mondiara.com/graphics/valign.html
sorry again, --patrik On 3.2.2009 1:09, Rod Castello wrote: > Patrik, > Your site requires sign-in information. > > Rod Castello > > --- On *Tue, 2/3/09, Patrik Jansson /<[email protected]>/* wrote: > > From: Patrik Jansson <[email protected]> > Subject: Re: [css-d] vertical alignment question > To: "Brett" <[email protected]> > Cc: [email protected] > Date: Tuesday, February 3, 2009, 12:01 AM > > On 3.2.2009 0:28, Brett wrote: > > How can I vertically align elements? I have an image gallery in which > I > > want all images to be centered vertically and horizontally. The > > horizontal part is easy, but I can't figure out how to center > > vertically. Here are my styles: > > > > #pictureWrapper { > > position:relative; > > background-color:#CCCCCC; > > height: 363px; > > width: 363px; > > } > > #mainpic { > > height: > 320px; > > width: 320px; > > position:relative; > > margin:auto; > > } > > #mainpic img { > > margin:auto; > > display:block; > > } > > > > #mainpic is the first child of #pictureWrapper and I want it to be > > centered vertically. But I also need to have the #mainpic img > > vertically aligned too, because when the image is landscape oriented > > there is a huge amount of space below. Is it possible to align > vertically? > > > > Hi, > What works for me is to use > top:50%; > and a > margin-top:-1/2xdiv height; > so on your example the margin-top for #mainpic would be > margin-top:-160px; > > Like here: http://www.mondiara.com/test/graphics/valign.html > > This is because top:50% sets the top of div to the middle, so the > negative margin-top compensates that. > > hope it > helps, > --patrik > ______________________________________________________________________ > css-discuss [[email protected]] > 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/ > > ______________________________________________________________________ css-discuss [[email protected]] 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/
