Sent by Patrik Jansson on 3 February 2009 00:12
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-REMOVED]>/* wrote:
>
> From: Patrik Jansson [EMAIL-REMOVED]>
> Subject: Re: [css-d] vertical alignment question
> To: "Brett" [EMAIL-REMOVED]>
> Cc: [EMAIL-REMOVED]
> 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-REMOVED]]
> 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-REMOVED]]
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/
