Jump to content

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

Great Rash

By Great Rash,
in Tricks and solutions

 Share

Recommended Posts

Great Rash Explorer

Great Rash

Posted
Posted

Вертикальное выравнивание. Часть 1. - для тех кто не в курсе.

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


<!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%;
    }

    .text {
      display: table;
      height: 100%;
      width: 100%;
      background: pink;
    }

    .inner {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
  </style>

  <!--[if lte IE 7]>
    <style type="text/css">
      .text {
        writing-mode: tb-rl;
        text-align: center;
      }

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

  <div class="text">
    <span class="inner">Я по центру</span>
  </div>

</body>
</html>

Проверял в:

ИЕ 9

ИЕ 9 (режим ИЕ 8)

ИЕ 9 (режим ИЕ 7)

Opera 11.11

Firefox 5

Chrome (последний)

Safari 5.0.5

  • Like 8
Link to comment
Share on other sites
Softlink Explorer

Softlink

Posted
Posted (edited)

:)А я вчера точно такой же вариант приводил в теме для начинающих. Только под ИЕ 7 не делал ничего. Пусть он уходит быстрее ;)

http://jsfiddle.net/9MvD5/2/

Тыкнул плюсик :)

Edited by Softlink
Link to comment
Share on other sites
Softlink Explorer

Softlink

Posted
Posted
display: table;

Не обязательно же. display: table-cell у внутреннего достаточно.

table-cell не растягивается на всю ширину экрана. Для этого эмулируем таблицу, которая тянется и высоту и ширину.

Link to comment
Share on other sites
SelenIT Explorer

SelenIT

Posted
Posted

Шикарный способ эмуляции 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>

Great Rash, огромное спасибо за такую оригинальную идею использования writing-mode!

  • Like 2
Link to comment
Share on other sites
Great Rash Explorer

Great Rash

Posted
  • Author
Posted

У меня нет ИЕ10 и нет возможности проверить в нем что-то. Подозреваю, что там не работает display: table-cell; что могу списать только на Platform Preview. Ссысл тестить что-то в браузере который еще даже не бета?

Link to comment
Share on other sites
Nekromancer Explorer

Nekromancer

Posted
Posted

У меня нет ИЕ10 и нет возможности проверить в нем что-то. Подозреваю, что там не работает display: table-cell; что могу списать только на Platform Preview. Ссысл тестить что-то в браузере который еще даже не бета?

Я тестил не в десятом, а через десятый но в режиме седьмого. Но так как там принципиально не работают условные комментарии для ие, он не увидел хаки. В IE Teste всё работает, как можно заметить на последнем скрине, даже фон поменялся на синий, который я прописал в комментариях, однако, в режиме IE7 всё равно текст в центре только во горизонтали.

Link to comment
Share on other sites
psywalker Explorer

psywalker

Posted
Posted

psywalker, я-то здесь причем? :unsure:

К сожалению не было времени читать пол ветки, поэтому сразу посмотрел твой пост, он ближе к концу :)

Вам вообще говорят, что пример не работает, а вы круто )

У меня пашет в ИЕ-7. А у кого-то нет? :unsure:

Link to comment
Share on other sites
psywalker Explorer

psywalker

Posted
Posted

Кстати, лишнее доказательство того что режим ИЕ7 в ИЕ9 работает НЕПРАВИЛЬНО.

А я давно уже об этом говорил, кстати. Уже не раз такое замечал сам, спотыкался даже на JS, и вообще не доверяю я ему. B)

Link to comment
Share on other sites
Great Rash Explorer

Great Rash

Posted
  • Author
Posted

Я короче сам налажал :) В ИЕ7 работало изначально, а я первый пример исправил на неработающий. т.к. не проверил поддержку значений writing-mode.

ИЕ7 просто не поддерживает tb-lr, а поддерживает tb-rl. Исправлю пример в первом посте...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept