div в другом div по центру

[Mfcer__]

есть код

<div id="container">
<div id="inner">
</div>
</div>

Как сделать чтобы div с id равным "inner" находился по середине по горизонтали и вертикали внутри div'а container?

[RXL]

Нечто вроде:

Код: (CSS)

.inner
{
  position: relative;
  left: 50%;
  width: xxx;
  margin-left: -xxx /* половину ширины */
  top: 50%;
  height: yyy;
  margin-top: -yyy /* половину высоты */
}

Это предположение - может сработать не так, как хотелось.


Я на практике получил такое:

Код: (CSS)

#login_dialog
{
    position: relative;
    width: 400px;
    margin-left: -200px;
    left: 50%;
    margin-top: 50px;
}

IE очень некрасиво отрабатывает top и left с процентами и пришлось отказаться от такого подхода. В моем случае ширина предка - 100%, посему left я оставил.

[RXL]

Еще: http://xhtml.ru/2005/05/24/vertical_centerbox/

[Mfcer__]

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

Необходимо также чтобы он был по вертикальной оси был сдвинут на 220px вниз

DIV находится на BODY

все перепробовал: relative, block, ...

не помогает...

[RXL]

position: absolute; - Это позиционирование от верхнего левого угла страницы. Далее также - left и top через проценты, z-index больше нуля, margin-left и margin-top - отрицательные, в половину ширины и высоты.

Есть еще position: fixed - относительно отображения в окне, но в IE не поддерживается.

[Mfcer__]

Вся проблема свелась к написанию фунции, которая DIV с указанным id показывает рядом с картинкой при нажатии на ее

id DIV'a это contentobjstr

id IMG'a это targetobjstr

никак не могу понять что делать с targetobj...


function showOverlay(contentobjstr, targetobjstr){
if (document.getElementById){

var contentobj=document.getElementById(contentobjstr);
var targetobj=document.getElementById(targetobjstr);

contentobj.style.display=(contentobj.style.display!="block")? "block" : "none";

// ЧТО ДЕЛАТЬ С targetobj?

return false
}
else
return true
}

[RXL]

Mfcer__, лично я ничего не понял из написанного... Ты чужой код правишь?


Почему у тебя идентификаторы не взяты в кавычки?

Код: (Javascript)

contentobj.style.display!="block"

Тут есть хитрая ситуация: это свойство изначально пустое (независимо от реальности), пока ему не сделано присвоение.

[Chuda]

есть ещё способ хитрый:
      ul.c_partners li .imgbox {
         display: table-cell;
         height: 97px;
         width: 143px;
         text-align: center;
         vertical-align: middle;
      }
всё прекрасно работает. Центрируется на ура. Но если теперь туда добавить float: left; то центрирование пропадает.
И как быть?

[RXL]

Шильгия, а зачем float, если ты его позиционируешь по центру? Float можно задать другому блоку, который будет вложен в вышеописанный.

[Chuda]

очень не хочется дивный суп. Но именно так и пришлось сделать.
А хочется-то семантическую вёрстку.

[Chuda]

люди добрые, поможите!
оказывается, способ с display: table-cell и vertical-align: middle не работает в ИЕ6.
Как вот быть тут?

[RXL]

IE6 не поддерживает большинство значений display, а из табличных - ничего вообще.
Следует использовать таблицы, а не их иммитацию.

[Chuda]

к сожалению (а можт и к счастью), некоторые варианты раскладки таблицами реализовать невозможно никак.