.png" height=13 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=11 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=9 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=7 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=5 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=3 /> </div>
Peter Mortensen
Peter Mortensen
Pergunta editada :em
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net
Esta pergunta tem 1 resposta em inglês, para as ler iniciar sessão à sua conta.

**Solução de imagem de fundo***

Eu removi o elemento de imagem completamente e o defini como fundo do mergulho com uma classe de `.frame'.

Isto pelo menos funciona bem na Internet Explorer 8, Firefox 6 e Chrome  13.

Eu verifiquei, e esta solução não vai funcionar para encolher imagens maiores que 25 pixels de altura. Há uma propriedade chamada `background-size' que define o tamanho do elemento, mas é CSS 3 que entraria em conflito com os requisitos da Internet Explorer 7.

Eu aconselharia você a refazer as prioridades do seu navegador e projetar para os melhores navegadores disponíveis, ou obter algum código do lado do servidor para redimensionar as imagens, se você quiser usar esta solução.

Tem uma pergunta? Adicione-a no sítio e obtenha uma resposta instantânea
pt.kzen.dev

Tu podias fazer isto:

Demo

/embedded/result,js,html,css/">

CSS

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 
60px; border:
px solid red; text-align: center; margin:
em 0; position: relative; /* Changes here... */ } img { background: #3A6F9A; max-height: 25px; max-width:
60px; top: 50%; /* Here.. */ left: 50%; /* Here... */ position: absolute; /* And here */ }


JavaScript

$("img").each(function(){
    this.style.marginTop = $(this).height() / -2 + "px";
})
Tem uma pergunta? Adicione-a no sítio e obtenha uma resposta instantânea
pt.kzen.dev

Isto funciona para navegadores modernos (2016 no momento da edição) como mostrado nesta demonstração no codepen

.frame {
    height: 25px;
    line-height: 25px;
    width: 160px;
    border: 1px solid #83A7D3;          
}
.frame img {
    background: #3A6F9A;
    display:inline-block;
    vertical-align: middle;
}

É muito importante que você dê uma classe às imagens ou use a herança para direcionar as imagens que você precisa centralizar. Neste exemplo usamos .frame img {} para que apenas imagens embrulhadas por um div com uma classe de .frame fossem alvo.