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

У меня есть простая кнопка 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
(обратите внимание, что маленький значок немного ниже центра кнопки)

Ответы

Ответ 1

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

Просто добавьте margin: -100px 0 в img, поэтому отрицательный запас будет иметь любую большую высоту:

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/, но она несколько взламывается и работает только с фиксированной высотой кнопки (как в вашем примере).

Ответ 2

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

Ответ 3

Там вы идете, используя jQuery:

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

Edit: Просто увидел, что вам нужен чистый CSS, ну, вот здесь, в коде gulfers!:)

Ответ 4

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

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

Ответ 5

Я, вероятно, пропустил некоторые из требований, так как установил span.Button height to 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, а затем, соответственно, центрируйте его.

Ответ 6

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

http://jsfiddle.net/92K8J/

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