Vertical-align: средний не работает

Свойство css vertical-align: middle не работает в этом примере.

HTML:

<div>
  <span class='twoline'>Two line text</span>
  <span class='float'>  Float right  </span>
</div>

CSS

.float {
    float: right;
}

.twoline {
    width: 50px;
    display: inline-block;
}

div {
    border: solid 1px blue;
    vertical-align: middle;
}

span, который плавает справа, не имеет вертикальной ориентации относительно его содержащего div. Как я могу иметь вертикальное центрирование?

Вышеприведенный код находится в этой скрипте.

Ответы

Ответ 1

Вы должны обернуть свой элемент в table-cell, в пределах table, используя display.

Вот так:

<div>
  <span class='twoline'>Two line text</span>
  <span class='float'>Float right</span>
</div>

и

.float {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}
.twoline {
    width: 50px;
    display: table-cell;
}
div {
    display: table;
    border: solid 1px blue;
    width: 500px;
    height: 100px;
}

Показан здесь: http://jsfiddle.net/e8ESb/7/

Ответ 2

Вертикальное выравнивание не совсем работает так, как вы этого хотите. См.: http://phrogz.net/css/vertical-align/index.html

Это не очень, но он сделает то, что вы хотите: вертикальное выравнивание ведет себя так, как ожидалось, только при использовании в ячейке таблицы.

http://jsfiddle.net/e8ESb/6/

Существуют и другие альтернативы: вы можете объявлять вещи как таблицы или ячейки таблицы в CSS, чтобы заставить их вести себя по желанию, например. Иногда можно играть с полями и позиционированием, чтобы получить тот же эффект. Однако ни одно из решений не является ужасным.

Ответ 3

Ответ, данный Мэттом К., отлично работает.

Однако важно отметить одно: Если div, к которому вы применяете его, имеет абсолютное позиционирование, он не будет работать. Чтобы он работал, сделайте это -

<div style="position:absolute; hei...">
   <div style="position:relative; display: table-cell; vertical-align:middle; hei..."> 
      <!-- here position MUST be relative, this div acts as a wrapper-->
      ...
   </div>
</div>

Ответ 4

Вы должны установить фиксированное значение для свойства span line-height:

.float, .twoline {
    line-height: 100px;
}