Hoe lijn je een afbeelding verticaal uit in een div

Question

Meer

Bron Niet AMP-versie Bewerken

Hoe lijn je een afbeelding verticaal uit in een div

Hoe kun je een afbeelding uitlijnen binnen een div?

Example

In mijn voorbeeld, moet ik de <img> verticaal centreren in de <div> met class ="frame":

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

.frame's hoogte is vast en image's hoogte is onbekend. Ik kan nieuwe elementen toevoegen in .frame als dat's de enige oplossing. Ik'probeer dit te doen op Internet Explorer 7 en later, WebKit, Gecko.

Zie de jsfiddle [hier][1].

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center;
    margin: 1em 0;
}
img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=15 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=13 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=11 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=9 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=7 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=5 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=3 />
 </div>

Peter Mortensen

Bewerkte vraag 11de3 juli 2019 в 7:00

Programmering

image css vertical-alignment

1ste3 september 2011 в 4:25

21 views

Benjamin Udink ten Cate · Answer 1 · 2011-09-04T13:17:02+00:00

Achtergrond beeld oplossing

Ik heb het afbeeldingselement helemaal verwijderd en het als achtergrond van de div ingesteld met een klasse van .frame

http://jsfiddle.net/URVKa/2/

Dit werkt in ieder geval prima op Internet Explorer 8, Firefox 6 en Chrome 13.

Ik heb het gecontroleerd, en deze oplossing werkt niet om afbeeldingen groter dan 25 pixels te verkleinen. Er is een eigenschap genaamd background-size die wel de grootte van het element instelt, maar het is CSS 3 wat in strijd zou zijn met Internet Explorer 7 eisen.

Ik zou je aanraden om ofwel je browser prioriteiten te herzien en te ontwerpen voor de best beschikbare browsers, of wat server-side code te krijgen om de grootte van de afbeeldingen aan te passen als je'd deze oplossing zou willen gebruiken.

Joseph Marikle · Answer 2 · 2011-09-04T17:34:04+00:00

Je zou dit kunnen doen:

Demo

http://jsfiddle.net/DZ8vW/1

CSS

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center; 
    margin: 1em 0;
    position: relative; /* Changes here... */
}
img {
    background: #3A6F9A;
    max-height: 25px;
    max-width: 160px;
    top: 50%;           /* Here.. */
    left: 50%;          /* Here... */
    position: absolute; /* And here */
}

JavaScript

$("img").each(function(){
    this.style.marginTop = $(this).height() / -2 + "px";
})

anglimasS · Answer 3 · 2011-09-01T17:29:55+00:00

Dit werkt voor moderne browsers (2016 op het moment van bewerken) zoals te zien is in deze demo op codepen

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

Het is erg belangrijk dat je de afbeeldingen een klasse geeft of overerving gebruikt om de afbeeldingen die je gecentreerd wilt hebben te targetten. In dit voorbeeld gebruiken we .frame img {} zodat alleen afbeeldingen die omwikkeld zijn door een div met een class van .frame gecentreerd worden.