Как получить внутренний div, чтобы заполнить весь div обертки?

Question

У меня есть следующий HTML-код:

<div class="outer ui-draggable" style="position: relative;">
  <div class="inner">Foo bar</div>
</div>

С этим CSS:

.outer
{
    background-color: #F7F085;
    margin: 5px;
    height: 100px;
    width: 150px;
    text-align:center;
    vertical-align:text-bottom;
}
.outer .inner
{
    display:inline;
    vertical-align:middle;
    height: 100px;
    width: 150px;
}

Я бы хотел, чтобы внутренний div полностью заполнил внешний div - текстовый блок должен быть полностью размером 100X150

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

Я также попытался использовать высота: наследовать и ширина: наследовать вместо указания размера.

Answer 1

Проблема со стилем display:inline. Если вы хотите, чтобы он вел себя как обычный DIV, сохраните его display:block. Если это display:inline, то оно будет таким же высоким, как и унаследованная высота строки.

Answer 2

Может быть из-за свойства стиля вертикального выравнивания. Это недопустимое правило стиля. Он действителен только для <tr> <td> и <div> с отображением: table-cell