Css аналог атрибута valign="middle" html тега td (tr)

Тема в разделе "Верстка", создана пользователем Axel G, 25 фев 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. Axel G

    Axel G Создатель

    Регистр.:
    30 мар 2009
    Сообщения:
    30
    Симпатии:
    2
    Ситуация знакомая каждому верстальщику. Заказчик не желает применять таблицы. Блочную ему подавай. Ок. Всё смастерил я значит как надо, за исключением:
    HTML:
    <table>
    <tr valign="top">
    <td align="center" valign="middle">Must be</td>
    <td>Some text</td>
    </tr>
    </table>
    Задача поставлена следующая, отцентровать вертикально и горизонтально левый элемент относительно правого, причём высота правого заранее неизвестна. Я пишу следующий код.
    HTML:
    <style>
    .tr {
        display: table-row;
        vertical-align: top;
        margin: 0;
        padding: 0;
        position: relative;
    }
    .td {
        display: table-cell;
        vertical-align: middle;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        /*height: 100%;*/
    }
    </style>
    <div class="tr">
    <div class="td">Must be</div>
    <div class="td">Some text</div>
    </div>
    Горизонтально всё ок, вертикально не хочет. Думал height: 100%; поможет, но браузер его просто игнорирует, пикселями, емами, дюймами задать нельзя. Высота текста Some text заранее не известна. Пробовал top: 50%; и тоже ничего. Кто сталкивался уже, чем лечить?
     
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.134
    Симпатии:
    668
  3. 99cent

    99cent

    Регистр.:
    27 фев 2009
    Сообщения:
    194
    Симпатии:
    11
    Код:
    <style>
    .tr {
    padding:0px;
    margin:0px;
    width:100%;
    }
    .td {
    display:inline-block;
    display=inline;
    width:45%;
    padding:0px;
    margin:0px;
    }
    .magic {height:50%;}
    </style>
     
    <div class="tr" align=center >
    <div class="magic">&nbsp;</div>
    <div class="td" align=center >Must be</div>
    <div class="td" align=center >Some text</div>
    </div>