Een afbeelding verticaal uitlijnen in een div

Hoe kun je een afbeelding uitlijnen binnen een met div?

Voorbeeld

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

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

De hoogte van

.frameis vast en de hoogte van de afbeelding is onbekend. Ik kan nieuwe elementen toevoegen in .frameals dat de enige oplossing is. Ik probeer dit op internet te doen  Explorer 7 en later, WebKit, Gecko.

Bekijk de jsfiddle hier.

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

Antwoord 1, autoriteit 100%

De enige (en de beste cross-browser) manier die ik ken, is om een ​​inline-block-helper te gebruiken met height: 100%en vertical-align: middleop beide elementen.

Er is dus een oplossing: http://jsfiddle.net/kizu/4RPFa/4570/


Antwoord 2, autoriteit 25%

Dit kan handig zijn:

div {
    position: relative;
    width: 200px;
    height: 200px;
}
img {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.image {
    min-height: 50px
}

Antwoord 3, autoriteit 24%

matejkramny’s oplossing is een goed begin, maar te grote afbeeldingen hebben een verkeerde verhouding.

Hier is mijn vork:

Demo: https://jsbin.com/lidebapomi/edit?html,css, uitvoer

preview


HTML:

<div class="frame">
  <img src="foo"/>
</div>

CSS:

.frame {
    height: 160px; /* Can be anything */
    width: 160px; /* Can be anything */
    position: relative;
}
img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Antwoord 4, autoriteit 15%

Een oplossing met drie regels:

position: relative;
top: 50%;
transform: translateY(-50%);

Dit geldt voor alles.

Van hier.


Antwoord 5, autoriteit 7%

Een pureCSS-oplossing:

.frame {
  margin: 1em 0;
  height: 35px;
  width: 160px;
  border: 1px solid red;
  position: relative;
}
img {
  max-height: 25px;
  max-width: 160px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #3A6F9A;
}
<div class=frame>
  <img src="https://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
  <img src="https://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
  <img src="https://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
  <img src="https://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
  <img src="https://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
  <img src="https://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
  <img src="https://jsfiddle.net/img/logo.png" height=15 />
</div>
<div class=frame>
  <img src="https://jsfiddle.net/img/logo.png" height=13 />
</div>
<div class=frame>
  <img src="https://jsfiddle.net/img/logo.png" height=11 />
</div>
<div class=frame>
  <img src="https://jsfiddle.net/img/logo.png" height=9 />
</div>
<div class=frame>
  <img src="https://jsfiddle.net/img/logo.png" height=7 />
</div>
<div class=frame>
  <img src="https://jsfiddle.net/img/logo.png" height=5 />
</div>
<div class=frame>
  <img src="https://jsfiddle.net/img/logo.png" height=3 />
</div>

Antwoord 6, autoriteit 6%

Voor een modernere oplossing en als het niet nodig is om oudere browsers te ondersteunen, kunt u dit doen:

.frame {
    display: flex;
    /**
    Uncomment 'justify-content' below to center horizontally.
    ? Read below for a better way to center vertically and horizontally.
    **/
    /* justify-content: center; */
    align-items: center;
}
img {
    height: auto;
    /**
    ? To center this image both vertically and horizontally,
    in the .frame rule above comment the 'justify-content'
    and 'align-items' declarations,
    then  uncomment 'margin: auto;' below.
    **/
    /* margin: auto; */
}
/* Styling stuff not needed for demo */
.frame {
    max-width: 900px;
    height: 200px;
    margin: auto;
    background: #222;
}
p {
    max-width: 900px;
    margin: 20px auto 0;
}
img {
    width: 150px;
}
<div class="frame">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">
</div>

Antwoord 7, autoriteit 4%

Op deze manier kunt u een afbeelding verticaal centreren (demo):

div{
  height: 150px; // Internet Explorer 7 fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom: 0.25em;
}

Antwoord 8, autoriteit 2%

U kunt Flexbox ook gebruiken om het juiste resultaat te bereiken:

.parent {
  align-items: center; /* For vertical align */
  background: red;
  display: flex;
  height: 250px;
  /* justify-content: center; <- for horizontal align */
  width: 250px;
}
<div class="parent">
  <img class="child" src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
</div>

Antwoord 9, autoriteit 2%

Er is een supereenvoudigeoplossing met flexbox!

.frame {
    display: flex;
    align-items: center;
}

Antwoord 10

Je zou kunnen proberen de CSS van PI in te stellen op display: table-cell; vertical-align: middle;


Antwoord 11

Je kunt de onderstaande code proberen:

.frame{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
<div class="frame" style="height: 25px;">
    <img src="https://jsfiddle.net/img/logo.png" />
</div>

Antwoord 12

Stel je voor dat je

<div class="wrap">
    <img src="#">
</div>

En css:

.wrap {
    display: flex;
}
.wrap img {
    object-fit: contain;
}

Antwoord 13

Achtergrondafbeelding oplossing

Ik heb het afbeeldingselement helemaal verwijderd en ingesteld als achtergrond van de div 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-sizedie de grootte van het element instelt, maar het is CSS 3 dat in strijd zou zijn met de vereisten van Internet Explorer 7.

Ik zou je aanraden om ofwel je browserprioriteiten en ontwerp opnieuw te doen voor de best beschikbare browsers, of een server-side code te krijgen om de afbeeldingen te verkleinen als je deze oplossing wilt gebruiken.


Antwoord 14

CSS-raster

Als u een enkele afbeelding verticaal binnen een afbeeldingscontainer wilt uitlijnen, kunt u dit gebruiken:

.img-container {
  display: grid;
}
img { 
  align-self: center;
}

Antwoord 15

http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    text-align: center;
    margin: 1em 0;
    display: table-cell;
    vertical-align: middle;
}
img {
    background: #3A6F9A;
    display: block;
    max-height: 35px;
    max-width: 160px;
}

De sleuteleigenschap is display: table-cell;voor .frame. Div.framewordt weergegeven als inline hiermee, dus je moet het in een blokelement plaatsen.

Dit werkt in Firefox, Opera, Chrome, Safari en Internet Explorer 8 (en hoger).

UPDATE

Voor Internet Explorer 7 moeten we een CSS-expressie toevoegen:

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}

Antwoord 16

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";
})

Antwoord 17

Dit werkt voor moderne browsers (2016 op het moment van bewerken) zoals weergegeven 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 u de afbeeldingen een klasse geeft of overerving gebruikt om de afbeeldingen te targeten die u gecentreerd wilt hebben. In dit voorbeeld hebben we .frame img {}gebruikt, zodat alleen afbeeldingen omsloten door een div met een klasse van .framegetarget zouden worden.


Antwoord 18

Mijn oplossing: http://jsfiddle.net/XNAj6/2/

<div class="container">
    <div class="frame">
        <img src="https://jsfiddle.net/img/logo.png" class="img" alt="" />
    </div>
</div>
.container {
    display: table;
    float: left;
    border: solid black 1px;
    margin: 2px;
    padding: 0;
    background-color: black;
    width: 150px;
    height: 150px;
}
.frame {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-width: 0;
}
.img {
    max-width: 150px;
    max-height: 150px;
    vertical-align: middle;
}

Antwoord 19

Probeer deze oplossing met pure CSS http://jsfiddle.net/sandeep/4RPFa/72/

Misschien is dit het grootste probleem met je HTML. U gebruikt geen aanhalingstekens wanneer u class& image heightin uw HTML.

CSS:

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    position: relative;
    margin: 1em 0;
    top: 50%;
    text-align: center;
    line-height: 24px;
    margin-bottom: 20px;
}
img {
    background: #3A6F9A;
    vertical-align: middle;
    line-height: 0;
    margin: 0 auto;
    max-height: 25px;
}

Als ik met de tag imgwerk, laat hij 3 tot 2 pixels ruimte over vanaf top. Nu verlaag ik line-heighten het werkt.

CSS:

   .frame {
        height: 25px;      /* Equals maximum image height */
        width: 160px;
        border: 1px solid red;
        margin: 1em 0;
        text-align: center;
        line-height: 22px;
        *:first-child+html line-height:24px; /* For Internet Explorer 7 */
    }
    img {
        background: #3A6F9A;
        vertical-align: middle;
        line-height: 0;    
        max-height: 25px;
        max-width: 160px;
    }
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .frame {
        line-height:20px; /* WebKit browsers */
    }

De eigenschap line-heightwordt in verschillende browsers anders weergegeven. We moeten dus verschillende line-heighteigenschappenbrowsers definiëren.

Bekijk dit voorbeeld: http://jsfiddle.net/sandeep/4be8t/11/

Bekijk dit voorbeeld over line-heightanders in verschillende browsers: Invoerhoogteverschillen in Firefox en Chrome


Antwoord 20

Ik ben niet zeker van Internet Explorer, maar onder Firefox en Chrome, als je een imgin een div-container hebt, zou de volgende CSS-inhoud moeten werken. Voor mij werkt het in ieder geval goed:

div.img-container {
    display: table-cell;
    vertical-align: middle;
    height: 450px;
    width: 490px;
}
div.img-container img {
    max-height: 450px;
    max-width: 490px;
}

Antwoord 21

Oplossing met een tabel en tabelcellen

Soms moet het worden opgelost door het weer te geven als table/table-cell. Bijvoorbeeld een snel titelscherm. Het is ook een aanbevolen manier door W3. Ik raad je aan deze link genaamd Een blok centreren of afbeeldingvan W3C.org.

De tips die hier worden gebruikt zijn:

  • Absolute positioneringscontainer weergegeven als tabel
  • Verticaal uitgelijnd om inhoud te centreren weergegeven als tabelcel
.container {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
}
.content {
    display: table-cell;
    vertical-align: middle;
}
<div class="container">
  <div class="content">
    <h1 style="text-align:center">Peace in the world</h1>
 </div>
</div>

Antwoord 22

Een gemakkelijke manier die voor mij werkt:

img {
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

Het werkt heel goed voor Google Chrome. Probeer deze eens in een andere browser.


Antwoord 23

Voor het centreren van een afbeelding in een container (het kan een logo zijn) naast wat tekst zoals deze:

Voer hier de afbeeldingsbeschrijving in

In feite wikkel je de afbeelding in

.outer-frame {
  border: 1px solid red;
  min-height: 200px;
  text-align: center; /* Only to align horizontally */
}
.wrapper{
  line-height: 200px;
  border: 2px dashed blue;
  border-radius: 20px;
  margin: 50px
}
img {
  /* height: auto; */
  vertical-align: middle;   /* Only to align vertically */
}
<div class="outer-frame">
  <div class="wrapper">
    some text
    <img src="https://via.placeholder.com/150x150">
  </div>
</div>

Antwoord 24

Als je kunt leven met marges ter grootte van een pixel, voeg dan gewoon font-size: 1px;toe aan het .frame. Maar onthoud dat nu op het .frame1em = 1px, wat betekent dat je de marge ook in pixels moet instellen.

http://jsfiddle.net/feeela/4RPFa/96/

Nu is het niet meer gecentreerd in Opera


Antwoord 25

Ik had hetzelfde probleem. Dit werkt voor mij:

<style type="text/css">
    div.parent {
        position: relative;
    }
    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
</style>
<div class="parent">
    <img class="child">
</div>

Antwoord 26

U kunt dit gebruiken:

.loaderimage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px; /* 50% of the height */
    margin-left: -30px;
 }

Antwoord 27

Met behulp van de table– en table-cell-methode is het werk voldoende, vooral omdat u zich ook op sommige oude browsers richt, ik maak een fragment voor u dat u kunt uitvoeren en controleer het resultaat:

.wrapper {
  position: relative;
  display: table;
  width: 300px;
  height: 200px;
}
.inside {
  vertical-align: middle;
  display: table-cell;
}
<div class="wrapper">
  <div class="inside">
    <p>Centre me please!!!</p>
  </div>
  <div class="inside">
    <img src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
  </div>
</div> 

Antwoord 28

Wilt u een afbeelding uitlijnen die achter een tekst/titel staat en beide in een div staan?

Zie op JSfiddleof voer codefragment uit.

Zorg er wel voor dat je een ID of een klasse hebt bij al je elementen (div, img, titel, etc.).

Voor mij werkt deze oplossing op alle browsers (voor mobiele apparaten moet je je code aanpassen met: @media).

h2.h2red {
    color: red;
    font-size: 14px;
}
.mydivclass {
    margin-top: 30px;
    display: block;
}
img.mydesiredclass {
    margin-right: 10px;
    display: block;
    float: left; /* If you want to allign the text with an image on the same row */
    width: 100px;
    heght: 100px;
    margin-top: -40px /* Change this value to adapt to your page */;
}
<div class="mydivclass">
    <br />
    <img class="mydesiredclass" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png">
    <h2 class="h2red">Text aligned after image inside a div by negative manipulate the img position</h2>
</div>

Antwoord 29

Ik ben aan het spelen geweest met het gebruik van opvulling voor uitlijning in het midden. U moet de grootte van de buitenste container op het hoogste niveau definiëren, maar de grootte van de binnenste container moet worden gewijzigd en u kunt de opvulling op verschillende percentages instellen.

jsfiddle

<div class='container'>
  <img src='image.jpg' />
</div>
.container {
  padding: 20%;
  background-color: blue;
}
img {
  width: 100%;
}

Antwoord 30

De beste oplossing is dat

.block{
    /* Decor */
    padding:0 20px;
    background: #666;
    border: 2px solid #fff;
    text-align: center;
    /* Important */
    min-height: 220px;
    width: 260px;
    white-space: nowrap;
}
.block:after{
    content: '';
    display: inline-block;
    height: 220px; /* The same as min-height */
    width: 1px;
    overflow: hidden;
    margin: 0 0 0 -5px;
    vertical-align: middle;
}
.block span{
    vertical-align: middle;
    display: inline-block;
    white-space: normal;
}

Other episodes