Извините, но фиксированная высота - одно из самых важных требований ... У меня есть несколько изображений, в основном с прозрачными пикселями, и я не хочу их обрезать, потому что 1. Это скучно 2. Они делятся с другими элементами пользовательского интерфейса и я не хочу их копировать.
я есть простая кнопка 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
(обратите внимание, что маленькая иконка находится чуть ниже центра кнопки)