Вертикальное выравнивание. Часть 2.

borus · October 21, 2011

On 8/2/2011 at 1:11 PM, SelenIT said:
.cell + .cell {
background: lightblue;
}

это дописывание свойств класса?

Быколай · October 21, 2011

On 10/21/2011 at 12:43 PM, borus said:

On 8/2/2011 at 1:11 PM, SelenIT said:
.cell + .cell {
background: lightblue;
}
это дописывание свойств класса?

это соседние селекторы

borus · October 21, 2011

А условные комментарии для IE можно как-то во внешний файл CSS спрятать?

Быколай · October 22, 2011

On 10/21/2011 at 6:51 PM, borus said:
А условные комментарии для IE можно как-то во внешний файл CSS спрятать?

лучше создать отдельный файл с ie-хаком и в условных подключать его

borus · October 23, 2011

On 8/2/2011 at 1:11 PM, SelenIT said:

Шикарный способ эмуляции display:table-cell в старых IE, всего с одной доп. оберткой. Особенно радует, что с минимальным допиливанием можно делать несколько ячеек рядом:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>

  <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
    }

    .table {
      display: table;
      height: 100%;
      width: 100%;
    }

    .cell {
      background: pink;
      display: table-cell;
      width: 50%;
      text-align: center;
      vertical-align: middle;
    }

    .cell + .cell {
      background: lightblue;
    }
  </style>

  <!--[if lte IE 7]>
    <style type="text/css">
      .cell {
        float: left;
        clear: right;
        writing-mode: tb-rl;
        text-align: center;
        height: 100%;
        width: 49.99%;
      }

      .content {
        display: inline-block;
        width: 100%;
        writing-mode: lr-tb;
      }
    </style>
  <![endif]-->
</head>
<body>

  <div class="table">
    <div class="cell">
      <span class="content">Я по центру</span>
    </div>
    <div class="cell">
      <span class="content">Я тоже</span>
    </div>
  </div>

</body>
</html>

Почему строка display: inline-block; в .content, а не в .cell?

SelenIT · October 23, 2011

Потому что в IE комбинация writing-mode: tb-rl; text-align: center; центрирует по вертикали целый инлайновый блок (как одно "слово", повернутое набок). А внутри этого блока тексту возвращается нормальная здоровая горизонтальная ориентация. Без дополнительной обертки .content я не представляю, как это сделать.

borus · October 23, 2011

On 10/23/2011 at 12:31 PM, SelenIT said:
Потому что в IE комбинация writing-mode: tb-rl; text-align: center; центрирует по вертикали целый инлайновый блок (как одно "слово", повернутое набок). А внутри этого блока тексту возвращается нормальная здоровая горизонтальная ориентация. Без дополнительной обертки .content я не представляю, как это сделать.

SelenIT, а если надо, чтобы две ячейки были шириной по 33% и разбежались влево и вправо?

я пробовал добавить в .cell float:left; width: 33%;

а в .cell+.cell float:right; но ничего не вышло.

Edited October 23, 2011 by borus

SelenIT · October 23, 2011

В IE7 работает, только что проверил. А в остальных — как вы себе представляете "разбегающиеся" ячейки таблицы (с display:table-cell)? Добавьте в середину еще одну ячейку шириной 34%, что ли...

hedgehog · December 9, 2011

On 10/23/2011 at 12:31 PM, SelenIT said:
Потому что в IE комбинация writing-mode: tb-rl; text-align: center; центрирует по вертикали целый инлайновый блок (как одно "слово", повернутое набок). А внутри этого блока тексту возвращается нормальная здоровая горизонтальная ориентация. Без дополнительной обертки .content я не представляю, как это сделать.

можно еще задавать line-height = height, а для дочерних элементов возвращать line-height в нормальное состояние. по-моему в ие такое работает

SelenIT · December 9, 2011

Да, работает, но требует жесткого задания этой высоты. В предыдущем топике ("сабж, часть 1") как раз было решение на подобном принципе, но с возможностью задавать высоту в процентах.

hedgehog · December 9, 2011

On 12/9/2011 at 4:59 PM, SelenIT said:
Да, работает, но требует жесткого задания этой высоты. В предыдущем топике ("сабж, часть 1") как раз было решение на подобном принципе, но с возможностью задавать высоту в процентах.

Так ведь если высота автоматическая и зависит от вложенных инлайн элементов, то должно работать vertical-align? Поправьте, если неправ.

SelenIT · December 9, 2011

В таком случае, да, зависит. Общая высота определяется самым высоким потомком, а остальные ровняются по его вертикальной середине. Просто из формулировки

Quote
задавать line-height = height, а для дочерних элементов возвращать line-height в нормальное состояние

я предположил, что речь о ситуации с единственным дочерним элементом, который меньше высоты контейнера (иначе не было бы вопроса центрирования)...

hedgehog · December 10, 2011

On 12/9/2011 at 5:42 PM, SelenIT said:
я предположил, что речь о ситуации с единственным дочерним элементом, который меньше высоты контейнера (иначе не было бы вопроса центрирования)...

а, теперь понял. вылетел из головы вариант с процентной высотой

borus · December 19, 2014

Здравствуйте!

Если применяю вертикальное выравнивание по этому методу, то .header-contacts (с Москвой и Пятигорском) здесь перестаёт занимать всю оставшуюся после логотипа ширину... Можно ли как-то заставить таблицу занимать всю оставшуюся после .our_logo ширину?

psywalker · December 19, 2014

On 12/19/2014 at 3:08 PM, borus said:
Здравствуйте!

Если применяю вертикальное выравнивание по этому методу, то .header-contacts (с Москвой и Пятигорском) здесь перестаёт занимать всю оставшуюся после логотипа ширину... Можно ли как-то заставить таблицу занимать всю оставшуюся после .our_logo ширину?

Не это ли вы случаем ищите?

Sign In

Вертикальное выравнивание. Часть 2.

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information