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

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Выравнивание картинки посередине в диве

 PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


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

> Без описания
Pavelbeginner
Отправлено: 22 Июля, 2010 - 04:52:35
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 882
Дата рег-ции: Март 2010  


Помог: 1 раз(а)




Вот код
<div width=400 height=300>
<img src="path_to_photo">
</div>
как выравнять картинку по центру и посередине дива, пробывал через align valign, и свойства css text-align:center vertical-align:middle не работает.
 
 Top
Aqu7
Отправлено: 22 Июля, 2010 - 08:54:08
Post Id


Новичок


Покинул форум
Сообщений всего: 1
Дата рег-ции: Июль 2010  


Помог: 0 раз(а)




Margin: 0 auto;
для дива в котором картинка
 
 Top
Uchkuma
Отправлено: 22 Июля, 2010 - 09:37:46
Post Id



Участник


Покинул форум
Сообщений всего: 1539
Дата рег-ции: Март 2010  
Откуда: Киров


Помог: 6 раз(а)




Aqu7 пишет:
Margin: 0 auto;
для дива в котором картинка
Какая связь между отступами снаружи дива и выравниванием внутри него?
 
 Top
Саныч
Отправлено: 22 Июля, 2010 - 09:42:26
Post Id



Участник


Покинул форум
Сообщений всего: 1365
Дата рег-ции: Июль 2010  
Откуда: Украина, Запорожье


Помог: 62 раз(а)




вот так работает:
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 вычесление верхнего отступа непосредственно при загрузке страницы

(Отредактировано автором: 22 Июля, 2010 - 09:43:48)



-----
Все возражают против того, что я гений, хотя никто еще так меня не назвал. - Орсон Уэллс
 
 Top
Pavelbeginner
Отправлено: 22 Июля, 2010 - 11:31:05
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 882
Дата рег-ции: Март 2010  


Помог: 1 раз(а)




Забыл дописать, что у дива стоит свойство переполнение overflow:hidden; в результате, когда использовал margin: 45px auto там, где фотографии были меньше выосты дива, они выравнялись по середине, а там, где фотографии были по высоте равными высоте дива, они уползли вниз на 45 px. Не подходит, нужно что-то другое.
 
 Top
Uchkuma
Отправлено: 22 Июля, 2010 - 11:55:11
Post Id



Участник


Покинул форум
Сообщений всего: 1539
Дата рег-ции: Март 2010  
Откуда: Киров


Помог: 6 раз(а)




Pavelbeginner, вы же уже спрашивали!
http://forum.php.su/topic.php?fo...41&topic=824
 
 Top
Pavelbeginner
Отправлено: 23 Июля, 2010 - 06:32:14
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 882
Дата рег-ции: Март 2010  


Помог: 1 раз(а)




Извините, забыл совсем...
 
 Top
JustUserR
Отправлено: 30 Июля, 2010 - 16:09:00
Post Id



Активный участник


Покинул форум
Сообщений всего: 8715
Дата рег-ции: Июнь 2009  


Помог: 17 раз(а)




Pavelbeginner Для расположения одного дочернего блочного объекта который может иметь переменные размеры - в центре другого родительского объекта для которого установлены фиксированные размеры и CSS-свойство overflow:hidden и box-sizing:border-box по необходимости - можно воспользоваться специальной JS-функций которая будет осуществлять динамческое центрирование Конкретно метод заключается в том что вы устанавливаете для дочернего объекта относительное позиционирование и свойтсва width/height в значение auto - и определяете его размеры в реальном времени с помощью свойств DOM-модели таких как offsetWIdth и offsetHeight соответственно - после чего можно найти значения для параметров относительного смещения left/top путем расчета найденных ранее параметров


-----
Сделать можно все что угодно - нужно только старание, терпение и хороший поисковик Улыбка
Безлимитный web-хостинг от 15 рублей за 40 МБ дискового пространства - http://ihost[dot]oks71[dot]ru/
 
 Top
Netgl
Отправлено: 18 Сентября, 2014 - 22:11:57
Post Id



Новичок


Покинул форум
Сообщений всего: 19
Дата рег-ции: Апр. 2011  


Помог: 1 раз(а)




 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB