Как вертикально выровнять изображение неизвестного размера по центру div?

Question

У меня есть простая кнопка HTML, которая содержит текст и изображение:

HTML: (Уже на http://jsfiddle.net/EFwgN)

<span class="Button">
    <img src="http://www.connectedtext.com/Image/ok.gif" />
    Small Icon
</span>

CSS:

span.Button {display:inline-block; margin:2px 4px;padding:3px 6px;
             background-color:#ddd; height:24px; line-height:24px;
             vertical-align:middle;}
span.Button img {vertical-align:middle;}

Я не могу придумать комбинацию, которая бы соответствовала этим требованиям:

• Изображение и текст должны быть вертикально посерединеdiv, с текстом в центре изображения. Он должен быть аккуратным.
• По горизонтали - изображение может быть в любой ширины , и кнопкадолжен увеличиться, чтобы показать это.
• По вертикали - изображение может иметь любую высоту, меньшую или большую , чем кнопка. Когда изображение больше, я неНе беспокойтесь, если дополнительные пиксели отображаются или обрезаются до тех пор, пока она находится в центре.
• Кнопка имеет фиксированную высоту. В настоящее время я использую line-height для центрирования текста.
• кнопка должна хорошо совмещаться с другими кнопками и текстом.
• Решение должно работать на всех последних версиях основных браузеров, и Internet Explorer 8.

Вот jsfiddle с моим текущим кодом: http://jsfiddle.net/EFwgN
(обратите внимание, что маленькая иконка находится чуть ниже центра кнопки)

Answer 1

Простое решение, если вам нужно не меньше, чем IE8 (в режиме стандартов): http://jsfiddle.net/kizu/EFwgN/31/

Просто добавьте margin: -100px 0 к img, чтобы отрицательное поле получило любую большую высоту:1006 *

span.Button img {vertical-align:middle; margin:-100px 0;
                 position:relative; top:-2px;}

Я добавил position: relative; top:-2px;, чтобы выглядело лучше:)

Но если вам понадобится поддержка режима совместимости или IE lt 8 (по некоторым причинам), то вещьс запасом не сработает.Поэтому вам понадобится дополнительная разметка: http://jsfiddle.net/kizu/EFwgN/28/,, но она несколько хакерская и работает только с фиксированной высотой кнопки (как в вашем примере).

Answer 2

Вот, пожалуйста, используя jQuery:

$(".button img").load(function()
          {
              $(this).each(function()
                           {
                               sh = $(this).outerHeight();
                               if (sh > 24){
                               alert(sh);
                              $(this).css("margin-top", - (sh - 24) / 2 + 'px');
                              }
                           });
          });

Редактировать: Только что увидел, что вы хотели, чтобы это был чистый CSS, ну, вот коду не хватает!:)

Answer 3

Использовать отображение на основе таблицы. Требуется сжатие изображения из-за конфликта между display:table-cell; и height:24px. Очень похоже на вашу прерванную попытку из комментариев, но включает в себя необходимые display:block; на изображении: http://jsfiddle.net/shanethehat/5ck3s/

Answer 4

Как насчет ... этого?

http://jsfiddle.net/92K8J/

Добавлен display:inline-block к изображениям и удален фиксированный height контейнера.

Answer 5

Я, вероятно, не выполнил некоторые требования, так как установка span.Button на auto сделала меня.

Если вам нужно, чтобы кнопка росла только горизонтально, с вертикальным переполнением, обрезанным, чем, может быть, я 'сделать это так:

span.Button {display:inline-block; margin:2px 4px;padding:3px 6px;
             background-color:#ddd; width:auto; height:24px; line-height:24px;overflow:hidden;
             vertical-align:middle;
             }

, используя немного JavaScript для определения высоты img, а затем отцентрировать его соответственно.

Answer 6

Почему бы не уменьшить изображение в том случае, если оно действительно выше кнопки?

span.Button img {
  vertical-align:middle;
  max-height: 100%;
}