1001-ый способ вертикального выравнивания

    О вертикальном выравнивании блока неизвестной высоты по центру или низу родителя сказано много. Есть способы, основанные на display:table-cell для хороших браузеров (без кавычек) и expression для IE, способы, основанные на относительном позиционировании (могут плохо работать при переполнении). В этой заметке будет описан способ, работающий на особенностях такого мощного отображения, как встроенный блок (display:inline-block).

    screen-capture


    Разметка



    Сразу оговорюсь, способ имеет недостаток, а именно, лишний элемент. Разметка будет выглядеть так, как показано ниже:
    <div class="parent">
        <div class="child">Текст, который заключён во внутренний блок. </div>
        <div class="helper"></div>
    </div>


    Описываемый метод основан на том, что vertical-align:middle нормально работает для инлайновых элементов. Так как в нашем случае инлайновые элементы не подойдут, используется смешанный тип (display:inline-block) для их эмуляции. Таким образом, если нам удастся представить внутреннее содержимое div.parent как строку, а div.child в ней выровнять по центру, используя vertical-align:middle, то мы достигнем результата.


    Стили



    Первая идея, которая возникает — задать принудительно высоту строки внутреннего содержимого с помощью line-height в 100% от высоты div.parent — отпадает, т.к. влечёт за собой изменение высоты строки внутри div.child, а переопределение line-height внутри div.child к положительному результату не приводит. На помощь приходит та самая распорка из 90-ых. Добавленный блок Div.helper должен иметь высоту div.parent, тем самым раздвигая нашу строку, как нам нужно. В результате можно выделить значащий CSS:

    .child {
        ...
        display:inline-block;
        vertical-align:middle;
    }
    .helper {
        ...
        display:inline-block;
        vertical-align:middle;
        height:100%;
        width:0px;
    }



    Боремся с IE



    Применяем хак для IE, который позволит использовать display:inline-block для блочных элементов (а также хак для FF2):

    .child {
        ...
        display:-moz-inline-box;
        display:inline-block;
        vertical-align:middle;
        zoom:1;
        //display:inline;
    }
    .helper {
        ...
        display:-moz-inline-box;
        display:inline-block;
        vertical-align:middle;
        height:100%;
        width:0px;
        zoom:1;
        //display:inline;
    }



    Результат



    Вот такой простенький способ. Работающий пример можно посмотреть здесь.

    Комментарии 46

      +1
      даже не верится, что все так просто. наболевшая проблема.
      добавил в закладки, теперь будут всегда использовать.

      только одно не понял: зачем в примере margin-left: -1px у helper?
        0
        Ой, это глюк, сейчас уберу
          0
          Это не глюк. Понятно, что вы тут пытались исправить: перенос div.helper на новую строку в случае длинного содержимого в контейнере child.
          Решается проблема просто:
          Текст, который заключён во внутренний блок.


            0
            извиняюсь, вот код:
            
            <div class="parent">
                 <div class="child" style="width: 100%; margin-left: -10px;">
                     <div style="margin-left: 10px;">Текст, который заключён во внутренний блок. </div>
                 </div>
                 <div class="helper"></div>
             </div>
            
      • НЛО прилетело и опубликовало эту надпись здесь
          0
          Извините, а когда высота парента не указана, данная проблема вообще стоит? ;)
          • НЛО прилетело и опубликовало эту надпись здесь
              +2
              Бывают случаи, когда самое время воспользоваться таблицами. Мне кажется, это один из них.
              • НЛО прилетело и опубликовало эту надпись здесь
                  –3
                  Тогда уж display: table, так как таблицы 1) принуждают к определенному порядку данных в исходнике 2) нельзя сделать версию для печати/КПК 3) уродливы и устарели 4) несемантичны 5) непонятно, как разделить в css презентационные таблицы и используемые для верстки, т.е. задаешь например border и padding — и он применяется ко всем таблицам сразу :((

                  Правда, с display: table-cell тоже есть подвох: не работает свойтво margin. Я вообще не понимаю, как на сегодняшних убогих и плохо поддерживаемых стандартах типа css вообще можно что-то верстать, кроме простого текста из нескольких абзацев. HTML — по прежнему язык для верстки научных отчетов CERN, ничего не поделаешь ((

                  p.s Простой пример: у страницы есть шапка (допустим, фиксированный размер в em), а в нижней, пустой части страницы ровно посередине пустого пространства надо разместить блок (пусть даже фиксированной высоты для простоты). И как это сделаешь? Да никак, без извратов типа яваскрипта (таблицы не годятся, так как шапка должна в коде идти после контента). Ах да. когда используешь яваскрпт — должен ставить обработчик onresize, так как в процессе отображения страницы может измениться размер шрифта или ширина окна :((
                  • НЛО прилетело и опубликовало эту надпись здесь
                      0
                      3) Это еще какой аргумент. В шаблонах все эти table, tr, особенно, разнесенные по отдельным файлам, выглядят уродливо. Я не могу с таким кодом работать (( Я как-то столкнулся с шаблоном (Astra CMS, админка :) ), где было 4(!) вложенных таблицы для верстки. И да, кто-то убрал выравнивание в исходнике :) Представьте себе мое возмущение!

                      4) Нет, не семантичнее. table — это таблица в контенте, и никак иначе. Для layout я использую div.

                      5) Тем, что эти классы надо прописать руками у каждого (!) элемента table, tr, td, более того, у layout таблицы надо в css сбросить те стили (border, padding), что прописаны для обычных таблиц — это же вообще плохо.

                      > Кстати, насчет margin слышу впервые. Это действительно так? Это во всех браузерах? Что на этот счет говорят стандарты?

                      Что у ячеек, рядов, колонок и их групп (и соотв-но элементов с display:table*) нет margin (зато есть padding). В принципе это логично, нельзя выдрать куда-то ячейку из таблицы, но при попытке вставить в существующую верстку display:table здорово обламывает.
                      • НЛО прилетело и опубликовало эту надпись здесь
                          0
                          В основном флоатами, есть разные техники, напрример через padding-bottom: 32000px/margin-bottom; -32000, faux columns (не пользовался), и ниже в комментах ссылка на хороший способ: chikuyonok.ru/2009/06/float-columns/
                      +1
                      А что мешает использовать абсолютное позиционирование в примере с шапкой?
                      • НЛО прилетело и опубликовало эту надпись здесь
                          0
                          Вот, здравое решение, это правда старая задача (решал вроде яваскриптом :) ), но все же.
                          0
                          Тот факт, что центрированный таким способом контент выпадает из потока, и не расталкивает страницу (и футер, который я не упомянул, но который там очевидно есть, кстати прибитый к низу :) ) вниз, если он большой по высоте.
                        • НЛО прилетело и опубликовало эту надпись здесь
                            0
                            > 2) Вообще-то можно (display:block, voila!), хотя без таблиц, конечно, удобней;

                            Вообще-то сложно, представьте, что у вас контент, а сбоку разные блоки. На печати или айфоне должен идти сначала контент, а под ним часть этих блоков (остальные скрыты). С таблицей — не сделаешь, с дивами — легко.

                            И вообще, я привык к схеме, когда в начале в коде идет контент, потом меню, потом всякая ерунда типа хедеров и футеров (как правило, просто несколько дивов). Когда страница без стилей выглядит вменяемо. Макет выглядит просто и логично. С таблицами такое невозможно.

                            Эх, еще бы поддержку :after и :before в ИЕ6/7 — так как из-за всеми любимого браузера постоянно приходится городить лишние элементы ((

                            > 3) Таблицы как были так и есть, без них таблицы толком не сверстаешь;

                            Я, что против табличных данных? Я против использования таблиц для layout :) Конечно, таблица выпадения осадков за месяц верстается через table :)

                            > «…таблицы не годятся, так как шапка должна в коде идти после контента» — почитали бы тот же хабр хотя бы: habrahabr.ru/blogs/css/67493/

                            О, вот это интересный пример, спасибо :)

                            p.s. А вот еще один пример дебильности современного css и поддержки в браузерах: представьте себе, что на странице есть див (min-height: 100%, overflow: hidden), в нем второй див с контентом и padding-bottom: 1000px/margin-bottom: -1000px (чтобы фон в этом диве тянулся до конца страницы). Представьте, что во втором диве в контенте есть анкор (элемент с определенным id). Что будет, если открыть страницу с ссылкой вида page#id?

                            Логичный ответ — страница (точнее, viewport) прокручивается до элемента id. А в реальности? Никогда не поверите. В Chrome и Firefox прокручивается первый (внешний) див с overflow:hidden, причем назад прокрутить его никак нельзя, и часть контента (над элементом id) становится невидима.

                            Победить средствами css —невозможно. Причина поведения — то ли подгон css 2.1 под поведение IE, то ли подгон браузеров под Acid 2, подробности тут: www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems#linking

                            Вот такие дела( Опять без яваскрипта не обойтись.
                            • НЛО прилетело и опубликовало эту надпись здесь
                                0
                                Да в моем примере проще, там одна колонка, просто надо внутренний див растянуть на 100% высоты родительского (точнее, чтобы фон и border left/right внутреннего элемента тянулись на всю страницу по высоте), и тут городить схему с флоатами — имхо больше проблем несет, чем тупо добавить яваскрипт из 2 строчек (или вообще, плюнуть на все и нарисовать бордеры внутреннего элемента фоновой картинкой на внешнем элементе).

                                Ах да, display:table-cell не катит, т к не действуют маргины, а они там используются и на внешнем, и на внутреннем элементах (как и border, и паддинг), и паддингом не заменяются.

                                В общем, вот пример: egor.000space.com/hate-opera/test.html#p3

                                Без #p3 — текст виден целиком.
                                • НЛО прилетело и опубликовало эту надпись здесь
                                    0
                                    > Насчёт вашего примера: вы слышали про схлопывание отступов?

                                    Да конечно, слышал, я обычно ставлю padding-top: 1px/margin-top: -1px или что-нибудь вроде этого, в примере для упрощения решил забить на это.

                                    > По поводу 100% высоты, почему не повесить оформление на #outer со min-height:100% или вообще даже на body?

                                    Есть ограничение на max-width для контента, но кроме того, должен быть маргин минимум 57px, border, серый фон и padding 57px — вот для того тут и 2 дива, одним не обойтись. Соотвественно, внешний див (outer) нужен для ограничения ширины, задания минимальной высоты и прибитого футера (в примере нет для простоты), а внутренний — задает отступы и фон с бордером.

                                    Без внутреннего дива, если ширина экрана < 800px, справа и слева от внешнего дива нет маргинов (т к там margin: 0 auto). Ставить паддинги/маргины на body/html нельзя, т к в исходной верстке (пример упрощен) есть элементы с шириной 100%.

                                    Делать фон картинкой на #outer — не очень хочется имитировать border лишней картинкой, их и так в оригинальной верстке уже штук 10, даже с учетом спрайтов :((

                                    Пока решение — тупо яваскриптом ставить на #outer scrollTop = 0 :(( Или же добавлять еще пару дивов и display:table-cell/height: 100%.
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                          0
                                          Гм, inline-block не рассматривал, подумаю, хотя конечно извратище то еще :)

                                          >> Ставить паддинги/маргины на body/html нельзя, т к в исходной верстке (пример упрощен) есть элементы с шириной 100%.
                                          > Не понял. На 100% body? А как же тогда футер прибивается? Если нет, то что мешает? Доктайп стоит.

                                          Гм, я про ширину а не высоту. Контент —ограничен по ширине, а вот например футер или шапка (котрых в примере нет) наследуют 100% ширины body, я про это. Футер прибивается установкой отрицательной margin-top, он идет после #outer (у которого 100% min-height).

                                          В любом случае, спасибо, теперь у меня намного больший выбор всяких вариантов :)
                                          • НЛО прилетело и опубликовало эту надпись здесь
                                              0
                                              Ну да, вообще это вариант, хотя конечно как-то странно стаивть паддинг, чтобы потом у детей его отменять назад. Надо будет подумать :)

                                              И все это, лишь бы избежать необходимость делать вложенный див! Вот уж язык, изврат на изврате.
                                    • НЛО прилетело и опубликовало эту надпись здесь
                              • НЛО прилетело и опубликовало эту надпись здесь
                          • НЛО прилетело и опубликовало эту надпись здесь
                              +1
                              Да, ваш пример имеет место. Но, имхо, он не совсем типичен и для него можно найти свой способ выровнять по вертикали.
                          +5
                          Поздравляю. Даже не знаю, нужно ли что-то добавлять. Хотя добавлю, что во втором фф и в ие6 достигнутый вами результат не работает при переносе строк.
                            –4
                            Да) Способы очень похожи, но всё-таки не совсем идеинтичны. Так что :-)
                              –1
                              Ну да, не идентичны, там стили в другом порядке, здесь другой способ придания inline-block эксплореру. Совсем разные.
                            –13
                            Вы бы ещё про расово верный векторный фидонет написали :)
                              0
                              Подскажите, как можно выровнять div по центру страницы вертикально и горизонтально?
                              Пока решил эту проблему с указанием отрицательных отступов в половину длины и высоты в пикселях, но хочу найти универсальное решение.
                                0
                                а чем предложенный вариант не подходит? ;)
                                  0
                                  Как задать высоту и длину резиновой странице?
                                    0
                                    ну… 100%, например ;)
                                      0
                                      Не помогает, думаете я не пробовал?)
                                        0
                                        Вобщем, надо смотреть макет и по ситуации верстать. Так универсально не скажешь
                                          +1
                                          Сегодня попробовал (встала такая же задача) — всё ок!
                                            0
                                            Лучше поздно, чем никогда! :)
                                  0
                                  Данный способ показался оптимальным, однако столкнулся с проблемой при размещении блока яндекс директа. Проблема в google chrome

                                  Посмотреть живьём можно тут: bruneta.ru (на шапке справа)

                                  Понимаю, что связано скорее всего с мусором, который передаёт сам яндекс для своего блока, но поскольку от мусора избавиться нельзя (или можно?), хотелось бы найти решение

                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                  Самое читаемое