вертикальное выравнивание изображения

Question

У меня есть изображение, которое я хочу выровнять по вертикали с некоторым текстом. Изображение не имеет границ, интервалов и было правильно обрезано. Тем не менее, он по-разному выравнивается в IE и Firefox, и я не могу понять, почему.

Выравнивание в IE:

Выравнивание в FF:

Обратите внимание, что в FF поле X совпадает с нижней частью текста. HTML-код, который я использую:

<div id="Header">
    <a href="#" onclick="return false;">Close</a>
    <a href="#" onclick="return false;"><img src="App_Themes/Dark/images/close-button.gif" alt="Close" style="border-width:0px;" /></a>
</div>            

И соответствующая часть таблицы стилей выглядит так:

#Header img
{
    vertical-align: middle;
    display: inline-block;
}

В прошлом я занимался этим, делая элемент изображения блоком, но это работает только тогда, когда изображение является единственным элементом в контейнере. Как я могу это исправить?

Answer 1

Попробуйте

#Header {
  vertical-align: middle;
}

Примечание. Я проверил это в режиме строгих стандартов. Похоже, это не повлияло на IE6, но переместило изображение вверх на IE8 и FF3.

Answer 2

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

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

Answer 3

Случайные мысли:

• Почему встроенный блок не должен работать как встроенный?
• Может ли быть некоторый запас или отступ на х? Можете ли вы проверить с Firebug?
• Не является ли "середина" неправильным способом выравнивания? при условии, что вы хотите выровнять их по базовой линии, не должно ли это быть "базовой линией"?
• Что если вы объедините два тега <a> в один?