положение картинки

[atew]

Подскажите как можно разместить 2 картинки в ряд, внизу по центру.

размер картинок разный, нужно что бы маленькая картинка была расположена по центру большой.

макет прикрепил к теме.

ах да, img 2 будет как ссылка, нужно что бы она при наведении изменялась

Edited September 30, 2011 by atew

[zSpx]

http://jsfiddle.net/dHxDj/1/

[atew]

понял. спасибо

а как сделать что бы они были по центру внизу??

[zSpx]

Ну тут уж можно экспериментально придти к ответу..

right:50%;
margin-right: -82px;/*половина ширины контейнера*/

Вообще, все зависит от контекста, в котором вы делаете этот пример. Изначально у вас было написано про абсолютное позиционирование и %, я так и сделал, но вообще, можно просто блоку указать ширину и центровать с помощью

margin: 0 auto 10%

Edited September 30, 2011 by zSpx

[atew]

не выходит как Вы говорите

вот что у меня есть сейчас:

 BODY {
    background-image: url(images/fon2.jpg);
    background-color: #000; 
    background-position: center 0;   /* на удивление картинка по центру
       }
.imgblock {
    position:absolute;
    right:33%;                  /* на удивление блок по центрирован
    bottom:6%;

}
.imgblock img {
    display:inline-block;
    vertical-align:middle;
}    

вот такой цсс дает необходимый результат

<div class="imgblock">
<img src="images/club.png" alt="" />
<a href="www.google.com"> <img src="images/enter.png" alt="" /></a>
</div>

Edited September 30, 2011 by atew

[zSpx]

http://jsfiddle.net/dHxDj/4/

Я же написал, что отрицательным маржином нужно сдвигать на половину ширины контейнера к которому применяются стили.

Edited September 30, 2011 by zSpx

[atew]

с помощью вашей подсказки, сделал так:

.imgblock {
    position:absolute;
    height:50px;
    right:50%;
    margin-right: -240px;
    bottom:12%;	
}

блок ровно по центру как мне и нужно

только не могу понять зачем задавать

margin-right: -240px; ??

логичнее было бы

.imgblock {
position:absolute;    
bottom:12%;	                       /* отступ снизу  */
margin-right: 50%;                     /* отступ справа */
}                

Edited September 30, 2011 by atew

[zSpx]

Отступ рассчитывается до левого края вашего элемента. Что бы элемент оказался ровно по центру, нужно его сдвинуть на половину ширины, для этого и задается отрицательный маржин.

http://jsfiddle.net/dHxDj/5/

Тут 3 примера, с маржином и без него.