CSS вертикальное выравнивание: середина не работает на панели навигации с текстом слева и ссылкой для входа справа

Question

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

Мне нужен следующий ресурс:

http://www.css4you.de/Texteigenschaften/vertical-align.html

и

http://www.css4you.de/example/vertical-align.html

Вот мой HTML:

<div style="border: 1px solid purple;">
  <h1 style="border: 1px solid red; display: inline;">Textext</h1>
  <span id="logindisplay" style="border: 1px solid lime; float: right; vertical-align: middle;"><a href="/admin/login.xhtml">Log In</a></span>
</div>

Селектор идентификатора CSS для logindisplay не существует. h1 просто

h1
{
  font-size: 18pt;
}

Я в основном сделал все как на ресурсе выше, но это не работает - ни на IE9, ни на FF. Вот что я получаю:

Кто-нибудь знает, что я делаю не так?

Примечание : обходные пути / хаки не нужны. (Можно было бы установить padding-top: на span ...)

Answer 1

Попробуйте это

#logindisplay { line-height: 18pt; }

... и избавьтесь от свойства вертикального выравнивания.

vertical-align не работает так, как вы думаете, похоже. Посмотрите на http://css -tricks.com / what-is-vertical-align / для хорошего объяснения того, что он делает.

Answer 2

Использование float: right отменяет выравнивание по вертикали, как вы нашли.Предложение Марка не работает с позицией: родственник на div?В этом случае высота строки кажется самым простым способом.

Answer 3

Другой подход - поместить позицию относительно родительского элемента div, а затем установить абсолютную позицию для диапазона, например:

#logindisplay {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -9px;
}

Пример

Answer 4

сделайте ваш внешний div равным display: table-cell или присвойте ему line-height соответствующего размера.

вертикальное выравнивание является одним из самых глупых битов CSS, и редко работает так, как вы ожидаете, без необходимости взламывать содержащие элементы: http://phrogz.net/css/vertical-align/index.html