On 3.2.2009 1:21, Brett wrote:
>
>
> Patrik Jansson wrote:
>> 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
>>
>>
>
> Patrik,
>
> Thank you. That centers the #mainpic div but not the img inside. The
> images are either landscape or portrait and this works fine on the
> portrait images but still leaves a lot of space below on a landscape
> image. Of course the landscape image height will differ from image to
> image, so there is no way to set a fixed height and therefore I cannot
> use the same technique for the img.
>
> Any other ideas?
>
> Brett
>
Hi,
Stupid me. I've just been studying css's display:table -properties and I
didn't figure out that the answer lies in there! So forget the
previous... :)
This time try setting the #pictureWrapper
display:table; with a fixed border-spacing (couldn't find, in this time,
find another way to center #mainpic)
and set #mainpic
display:table-cell; with a
vertical-align:middle;
like this: http://www.mondiara.com/graphics/valign.html , css is
embedded in the code
good luck,
--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/
