.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
Redaguotas klausimas popietr liepa 2019 в 7:00
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net
Šis klausimas turi 1 atsakymas atsakymų anglų kalba, norėdami juos perskaityti prisijunkite prie savo paskyros.

Foninio vaizdo sprendimas

Visiškai pašalinau paveikslėlio elementą ir nustačiau jį kaip div foną su .frame klase

Tai bent jau veikia gerai Internet Explorer 8, Firefox 6 ir Chrome 13.

Patikrinau, ir šis sprendimas neveikia norint sumažinti didesnius nei 25 pikselių aukščio paveikslėlius. Yra savybė background-size, kuri nustato elemento dydį, tačiau ji yra CSS 3, o tai prieštarautų Internet Explorer 7 reikalavimams.

Patarčiau arba iš naujo nustatyti naršyklės prioritetus ir kurti geriausioms turimoms naršyklėms, arba gauti kokį nors serverio pusės kodą, kuris pakeistų paveikslėlių dydį, jei norite naudoti šį sprendimą.

Do you have a question? Add it on the site and get an answer instantly
en.kzen.dev

Galite padaryti taip:

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";
})
Do you have a question? Add it on the site and get an answer instantly
en.kzen.dev

Tai veikia šiuolaikinėse naršyklėse (2016 m. redagavimo metu), kaip parodyta šioje codepen demonstracijoje.

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

Labai svarbu, kad paveikslėliams suteiktumėte klasę arba naudotumėte paveldimumą, kad nukreiptumėte į tuos paveikslėlius, kuriuos reikia centruoti. Šiame pavyzdyje naudojome .frame img {}, kad būtų nukreipti tik tie paveikslėliai, kuriuos gaubia divas su .frame klase.