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
Отправлено: 30 Июня, 2011 - 06:03:39
Post Id



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


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


Помог: 1 раз(а)
Есть див со свойством position:relative. Внутри него есть еще один див со свойством position:absolute. Дочерний див мне нужно спозиционировать по центру родительского дива, использую свойства left, right. Как это сделать? Именно через left, right нужно.
 
 Top
DeepVarvar Супермодератор
Отправлено: 30 Июня, 2011 - 07:31:40
Post Id



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


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)
Pavelbeginner пишет:
Как это сделать?
взять калькулятор и посчитать "отступы" в пикселях.
 
 Top
morosit
Отправлено: 30 Июня, 2011 - 09:23:15
Post Id



Посетитель


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


Помог: 4 раз(а)
можно и в процентах
 
 Top
Pavelbeginner
Отправлено: 30 Июня, 2011 - 12:25:11
Post Id



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


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


Помог: 1 раз(а)
DeepVarvar, сайт не фиксирован в ширину, поэтому родительский див может быть разной ширины. Поэтому и нужно расположить именно по центру.

morosit, в процентах не канает т.к. ширина дочернего блока довольно большая, если указать в процентах, то процент берется от ширины родительского блок и тогда дочерний блок располагается не по центру.
Вот в background, если указывать проценты, то то что нужно! Если бы в left, right можно было как-то также сделать.
 
 Top
DeepVarvar Супермодератор
Отправлено: 30 Июня, 2011 - 12:32:22
Post Id



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


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)
CODE (html):
скопировать код в буфер обмена
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. </head>
  5. <body>
  6. <style type="text/css">
  7. #container {
  8.         margin: 0 auto;
  9.         width: 80%;
  10.         height: 400px;
  11.         border: solid 1px #00f;
  12. }
  13. #main {
  14.         margin: 0 auto;
  15.         margin-top: 50px;
  16.         width: 80%;
  17.         height: 300px;
  18.         border: solid 1px #f00;
  19. }
  20. #floater {
  21.         position: absolute;
  22.         left: 50%;
  23.         margin-left: -100px;
  24.         width: 200px;
  25.         height: 200px;
  26.         border: solid 1px #0f0;
  27. }
  28. </style>
  29. <div id="container">
  30.         <div id="main">
  31.                 <div id="floater"></div>
  32.         </div>
  33. </div>
  34. </body>
  35. </html>
 
 Top
Pavelbeginner
Отправлено: 30 Июня, 2011 - 15:10:11
Post Id



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


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


Помог: 1 раз(а)
Да, но дочерний контейнер не имеет фиксированной ширины. но все равно спасибо.
 
 Top
join
Отправлено: 01 Июля, 2011 - 10:41:07
Post Id



Гость


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


Помог: 1 раз(а)
чисто центрировать - можно так
CODE (html):
скопировать код в буфер обмена
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. </head>
  5. <body>
  6. <style type="text/css">
  7.  
  8.  
  9. #main {
  10.         position: relative;
  11.         background:lightgreen;
  12.         height:500px;
  13.         width:500px;
  14.         padding:0;
  15.         margin:0;
  16. }
  17. #floater{    
  18.         width: auto;
  19.         height: auto;
  20.         padding:15px 2px;/*можно обнулять 0px*/
  21.         margin:0;
  22.         border: solid 1px #000;
  23.         position:absolute;
  24.         left:45%;
  25.         top:45%;
  26. }
  27. </style>
  28.  
  29.         <div id="main">
  30.                 <div id="floater">dochka</div>
  31.         </div>
  32.  
  33. </body>
  34. </html>


-----
- "Holy shit!" -девиз Холливуда
- "Hello world " -девиз PhP
 
 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