Hvordan justere et bilde vertikalt inne i en div.

Question

Mer

Kilde Ikke AMP-versjon Rediger

Hvordan justere et bilde vertikalt inne i en div.

Hvordan kan du justere et bilde inne i en div?

Eksempel

I mitt eksempel må jeg vertikalt sentrere <img> i <div> med class ="frame":

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

.frame's høyde er fast og image's høyde er ukjent. Jeg kan legge til nye elementer i .frame hvis det er den eneste løsningen. Jeg prøver å gjøre dette på Internet Explorer 7 og nyere, WebKit, Gecko.

Se jsfiddle [her][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

Redigerte spørsmål 11. juli 2019 в 7:00

Programmering

image css vertical-alignment

1. september 2011 в 4:25

10 visninger

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

Bakgrunnsbildeløsning

Jeg fjernet bildeelementet helt og satte det som bakgrunn for div med en klasse av .frame.

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

Dette fungerer i det minste fint på Internet Explorer 8, Firefox 6 og Chrome 13.

Jeg sjekket, og denne løsningen vil ikke fungere for å krympe bilder som er større enn 25 piksler i høyden. Det finnes en egenskap som heter "background-size" som angir størrelsen på elementet, men det er CSS 3 som kommer i konflikt med kravene til Internet Explorer 7.

Jeg vil råde deg til enten å gjøre om nettleserens prioriteringer og design for de beste tilgjengelige nettleserne, eller få litt kode på serversiden for å endre størrelsen på bildene hvis du vil bruke denne løsningen.

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

Du kan gjøre dette:

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

Dette fungerer for moderne nettlesere (2016 på redigeringstidspunktet) som vist i denne demo på codepen.

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

Det er veldig viktig at du enten gir bildene en klasse eller bruker arv for å målrette bildene du trenger sentrert. I dette eksemplet brukte vi .frame img {} slik at bare bilder som er pakket inn av en div med en klasse av .frame ville bli målrettet.