Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Выравнивание картинки посередине в диве
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Выравнивание картинки посередине в диве

Страниц (1): [1]
 

1. Pavelbeginner - 22 Июля, 2010 - 04:52:35 - перейти к сообщению
Вот код
<div width=400 height=300>
<img src="path_to_photo">
</div>
как выравнять картинку по центру и посередине дива, пробывал через align valign, и свойства css text-align:center vertical-align:middle не работает.
2. Aqu7 - 22 Июля, 2010 - 08:54:08 - перейти к сообщению
Margin: 0 auto;
для дива в котором картинка
3. Uchkuma - 22 Июля, 2010 - 09:37:46 - перейти к сообщению
Aqu7 пишет:
Margin: 0 auto;
для дива в котором картинка
Какая связь между отступами снаружи дива и выравниванием внутри него?
4. Саныч - 22 Июля, 2010 - 09:42:26 - перейти к сообщению
вот так работает:
CODE (html):
скопировать код в буфер обмена
  1. <div style="width:400px; height: 300px">
  2. <img src="path_to_photo" style="display: block; margin: 45px auto;">
  3. </div>

выравнивается по горизонтали, если высота картинки известна, то можно прописать вот так: margin: 45px auto; вместо 45px - такое вычисление: (высота div - высота img) / 2

Если же высота подгружаемой картинки не известа, то можно написать на js вычесление верхнего отступа непосредственно при загрузке страницы
5. Pavelbeginner - 22 Июля, 2010 - 11:31:05 - перейти к сообщению
Забыл дописать, что у дива стоит свойство переполнение overflow:hidden; в результате, когда использовал margin: 45px auto там, где фотографии были меньше выосты дива, они выравнялись по середине, а там, где фотографии были по высоте равными высоте дива, они уползли вниз на 45 px. Не подходит, нужно что-то другое.
6. Uchkuma - 22 Июля, 2010 - 11:55:11 - перейти к сообщению
Pavelbeginner, вы же уже спрашивали!
http://forum.php.su/topic.php?fo...41&topic=824
7. Pavelbeginner - 23 Июля, 2010 - 06:32:14 - перейти к сообщению
Извините, забыл совсем...
8. JustUserR - 30 Июля, 2010 - 16:09:00 - перейти к сообщению
Pavelbeginner Для расположения одного дочернего блочного объекта который может иметь переменные размеры - в центре другого родительского объекта для которого установлены фиксированные размеры и CSS-свойство overflow:hidden и box-sizing:border-box по необходимости - можно воспользоваться специальной JS-функций которая будет осуществлять динамческое центрирование Конкретно метод заключается в том что вы устанавливаете для дочернего объекта относительное позиционирование и свойтсва width/height в значение auto - и определяете его размеры в реальном времени с помощью свойств DOM-модели таких как offsetWIdth и offsetHeight соответственно - после чего можно найти значения для параметров относительного смещения left/top путем расчета найденных ранее параметров
9. Netgl - 18 Сентября, 2014 - 22:11:57 - перейти к сообщению
Центрирование по вертикали Хорошо

 

Powered by ExBB FM 1.0 RC1