Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Вировнять по центру

Автор: Zorak 6.6.2008, 15:09

Чисто теоретический вопрос... вот вировнял box по центру страници

Код


#wrapper {
    margin:10px;
    border:1px solid blue;
    height:100%;
    padding:10px;
    width:500px;
        float:left;
    position:absolute;
    left:50%;
    margin-left:-25%;
}

тепер я не понимаю, как ето так получилось ??? первых 5 строк знаю.... написал, остальные не понял.... а в последнем вообще почему мне стрельнуло в голову написать "-25%", а не "25%", даже не понимаю... поясните пжлста мой же код)...

Автор: NDenis 6.6.2008, 15:16

центрирование по горизонтали с помощью абсолютного позиционирования
left:50% - отодвигаем левую границу блока к середине окна браузера, но не самого блока ;)
margin-left: -25% - а вот это как раз исправление выше описанного.

Автор: Zorak 6.6.2008, 17:29

Цитата(NDenis @ 6.6.2008, 15:16)

margin-left: -25% - а вот это как раз исправление выше описанного.

в смисле исправление ?)

Автор: bars80080 6.6.2008, 17:36

в смыле ты отодвинул слой от левого края на 50% (left: 50%), а затем на 25% откатил назад к левому краю

Автор: Zorak 6.6.2008, 18:07

Цитата(bars80080 @ 6.6.2008, 17:36)

в смыле ты отодвинул слой от левого края на 50% (left: 50%), а затем на 25% откатил назад к левому краю

зачем ??? не проще в таком случае былоб left:25% ???

Автор: bars80080 6.6.2008, 18:13

ну, это тебя надо спросить, что это у тебя нагорожено. я лично не вижу причин так писать

но причина конечно может быть, скажем авторский замысел. а чей? вроде твой

Автор: lukas 6.6.2008, 18:18

лучше писать так...

Код


margin: 0 auto;

и твой слой будет по центру...

Автор: Zorak 6.6.2008, 22:47

Да, добрал шва, спасибо)...

Автор: malkovian 14.6.2008, 02:36

Код



#wrapper {
    margin:10px;
    border:1px solid blue;
    height:100%;
    padding:10px;
    width:500px;
        float:left;
    position:absolute;
    left:50%;
    margin-left:-25%;
}

а к чему float:left к выравниванию по центру?

Автор: SelenIT 14.6.2008, 15:00

malkovian, ни к чему, это ошибка, которую забыли убрать. Конечно, при position:absolute float не действует и действовать не может.

Цитата(Zorak @ 6.6.2008, 18:07

)

зачем ??? не проще в таком случае былоб left:25% ???

Проще, но эффект центрирования был бы только при ширине окна 1000px smile

. Как и сейчас, впрочем. Вот margin-left:-250px (на половину width) дало бы центрирование везде (при фиксированной ширине блока, как тут), но на очень маленьком экране левый край блока просто уходил бы за экран без возможности его прочитать хоть как-либо.

Цитата(lukas @ 6.6.2008, 18:18

)

лучше писать так...

Код


margin: 0 auto;

и твой слой будет по центру...

Да, только для надежной работы этого нужен Standards-режим рендеринга (корректный доктайп по-простому). 5-й IE пролетает, но туды ему и дорога ;)

А вот для вертикального центрирования подобный прием достаточно успешно применяется.