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

[Axel G]

Ситуация знакомая каждому верстальщику. Заказчик не желает применять таблицы. Блочную ему подавай. Ок. Всё смастерил я значит как надо, за исключением:

<table>
<tr valign="top">
<td align="center" valign="middle">Must be</td>
<td>Some text</td>
</tr>
</table>

Задача поставлена следующая, отцентровать вертикально и горизонтально левый элемент относительно правого, причём высота правого заранее неизвестна. Я пишу следующий код.

<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%; и тоже ничего. Кто сталкивался уже, чем лечить?

 

[mdss]

Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся

 

[99cent]

<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>