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/
