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