от позиционировать элемент в динамическом блоке

[cyber_ua]

есть блок который увеличивается при определенном событие в нем картинка

<div class="little_point" style="left: 427px; top: 356px;">
<img src="http://www.google.com/mapfiles/marker.png" />
</div>

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

вот стили блока

.little_point {
position:absolute;
width:20px;
height:34px;
-webkit-transition: all 1s ease;	
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
background-repeat:no-repeat;
background-color:#000;
}

высота и ширина меняются через js динамически

пробывал через

vertical-align

но элемент даже не сдвинулся

Edited September 1, 2012 by cyber_ua

[mrnobody]

А можно картинку сделать фоновой у этого блока?

[solovets-denis]

vertical-align сработает в ячейке таблицы, а вот к блоку для этого параметра требуется приписать display:table-cell; (ШУ6-7 не поймет, Сафари 3 не сработает, если внешний блок не будет иметь свойство display:table;).

Можно сделать так:

1. Выровнять по центру:

.little_point {text-align:center;}

2. "Прибить к полу":

.little_point img {
position:relative;
top:100%;
margin-top:-34px; // вместо 34 впишите высоту картинки
}

Должно помочь.

Edited September 1, 2012 by solovets-denis

[cyber_ua]

нет не получится, просто я чут ступил

там ссылка вокруг элемента будет,вместо картинки можно поставить див с фоном

<div class="little_point" style="left: 427px; top: 356px;">
<a href="#"><img src="http://www.google.com/mapfiles/marker.png" /></a>
</div>

[USF]

от этого мало что изменяется. сделай <a> блочным и позиционируй

[cyber_ua]

спс помогло.

а можно прижать к низу без

position:relative;
top:100%;
margin-top:-34px

просто картинка может поменятся, а потом забуду поменять высоту?!

Edited September 1, 2012 by cyber_ua

[mrnobody]

А зачем вы так позиционируете, вым же нужно прижатm у низу, тогда задайте ссылке абсолютное позиционирование, и прижмите к низу блока через bottom: 0; пропишите еще left: 50%; margin-left: -10px;

http://jsfiddle.net/Agmyj/

Но только нужно менять margin-left делать отрицательным в половину ширины картинки, если она поменяется

Edited September 2, 2012 by mrnobody

[cyber_ua]

А зачем вы так позиционируете, вым же нужно прижатm у низу, тогда задайте ссылке абсолютное позиционирование, и прижмите к низу блока через bottom: 0; пропишите еще left: 50%; margin-left: -10px;

http://jsfiddle.net/Agmyj/

Но только нужно менять margin-left делать отрицательным в половину ширины картинки, если она поменяется

эм. зачем?

вот нашел решение, чет я затупил когда тему создавал(сонный был)

.little_point {
width:20px;
height:34px;
position:absolute;
background-repeat:no-repeat;
background-color:#000;
text-align:center;	
}

.little_point  img{
	bottom:0;
	position:absolute;
	}		

всем спасибо!

[USF]

mrnobody вам предложил практически то же самое, только центрирование горизонтальное сделал немного по другому

[cyber_ua]

я прочитал его комментарий после того как решил=)