<style type="text/css">
.smallPictureBlock{
width:125px; height:125px;
line-height:125px;
background:url(/img/bgBlock.gif) no-repeat;
text-align:center;
vertical-align:middle;
}
</style>
<div class="smallPictureBlock">
<img src="img/port/p1.gif" alt="" />
</div>
Вертикальное выравнивание
Столкнулся с такой проблемой - нужно картинку выровнять в блоке по вертикали и по горизонтали. Картинка должна выравниватся в не зависимости от ее ширины и высоты. Т.е. всегда по-центру блока.
Наваял такое:
И...нифига ( Ну, по-горизонтали то выровнялось, но этого мало.
Спросил у Гугла:
1. http://cssing.org.ua/2007/04/26/another-css-valign-method/
2. http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
1-ый способ нравится больше. Меньше кода, все гуд в нормальных браузерах. Но вот осел! Во-первых у меня класс а не айди (а как достучатся до дива с помощью javascrit через его имя класса я так и не осилил), а во-вторых таких блоков может быть неограниченное количество.
Вобщем - Бен, I need help!
Наваял такое:
Код:
И...нифига ( Ну, по-горизонтали то выровнялось, но этого мало.
Спросил у Гугла:
1. http://cssing.org.ua/2007/04/26/another-css-valign-method/
2. http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
1-ый способ нравится больше. Меньше кода, все гуд в нормальных браузерах. Но вот осел! Во-первых у меня класс а не айди (а как достучатся до дива с помощью javascrit через его имя класса я так и не осилил), а во-вторых таких блоков может быть неограниченное количество.
Вобщем - Бен, I need help!
Как то уже выкладывал эту ссылку:
http://www.pmob.co.uk/temp/vertical-align3.htm
http://www.pmob.co.uk/temp/vertical-align3.htm
Пасиб. То что доктор прописал!
А может кто еще подскажет как яваскриптом достучатся до дива через имя класса? Так, на всякий случай :)
А может кто еще подскажет как яваскриптом достучатся до дива через имя класса? Так, на всякий случай :)
Цитата: cogonet
А может кто еще подскажет как яваскриптом достучатся до дива через имя класса? Так, на всякий случай :)
[document.]classes.className.stylePropertyName
пример:
document.classes.myclass.visibility='hidden'
И тебе спасибо добрый человек ! :)
Цитата: cogonet
1-ый способ нравится больше. Меньше кода, все гуд в нормальных браузерах. Но вот осел! Во-первых у меня класс а не айди (а как достучатся до дива с помощью javascrit через его имя класса я так и не осилил), а во-вторых таких блоков может быть неограниченное количество.
Можно упростить задачу, ведь достукиваться до дива тебе нужно лишь для высоты, но она ведь известна, значит можно прямо так и написать
Код:
.smallPictureBlock img{
margin-top: expression((62-parseInt(offsetHeight)/2) <0 ? "0" : 62-(parseInt(offsetHeight)/2) +'px') ;
}
margin-top: expression((62-parseInt(offsetHeight)/2) <0 ? "0" : 62-(parseInt(offsetHeight)/2) +'px') ;
}
Где 62 это 125 из твоего ЦСС деленое на 2, в формуле ведь участвовала высота деленная на 2.
В общем случае нужно стучаться к обертке через parentNode, но тут можно обойтись малой кровью...
Вдобавок этот експрешн лучше использовать вместе с оптимизацией - ведь выполнять его при фиксированных пропорциях нужно лишь один раз при загрузке (http://cssing.org.ua/2007/12/06/expression-optimization/)
Заранее прошу прощения за публикацию ссылки на свой блог, только ради пользы делу...
hth
PS. Сорри что поднял августовскую тему, только заметил (
Надеюсь кому-то это пригодится
offtop: Ого, мне отписал член WSG :eek: :D
спасибо - посмотрим что там. Давно хотел пообщатся коллега ;)
спасибо - посмотрим что там. Давно хотел пообщатся коллега ;)
Цитата: cogonet
offtop: Ого, мне отписал член WSG :eek: :D
чей-чей?
Цитата:
чей-чей?
WSG - Web Standards Group
http://web-standards.ru/