css - una - Come allineare verticalmente un'immagine all'interno di un div?




centrare un immagine in una div (20)

SOLUZIONE UTILIZZANDO TABELLA E CELLA DELLA TABELLA

A volte dovrebbe essere risolto visualizzando come tabella / tabella-cella. Ad esempio una schermata del titolo veloce. È anche un modo consigliato da W3. Vi consiglio di controllare questo collegamento chiamato Centratura delle cose da W3C.org

I suggerimenti usati qui sono:

  • Contenitore di posizionamento assoluto visualizzato come tabella
  • Verticale allineato al contenuto centrale visualizzato come tabella-cella

.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> 

Personalmente in realtà non sono d'accordo sull'utilizzo di aiutanti per questo scopo

Domanda

Come puoi allineare un'immagine all'interno di un div contenente?

Esempio

Nel mio esempio, ho bisogno di centrare verticalmente il <img> nel <div> con class ="frame ":

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

l'altezza di .frame è fissa e l'altezza dell'immagine è sconosciuta. Posso aggiungere nuovi elementi in .frame se questa è l'unica soluzione. Sto cercando di farlo su IE≥7, Webkit, Gecko.

Guarda il jsfiddle here

.frame {
    height: 25px;      /* equals max 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>


C'è una soluzione super facile con Flexbox!

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

Ho avuto lo stesso problema. Questo funziona per me:

<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>

Ho giocato con l'utilizzo del padding per l'allineamento del centro. Dovrai definire la dimensione del contenitore esterno di primo livello, ma il contenitore interno dovrebbe ridimensionare e puoi impostare il riempimento a valori percentuali diversi.

jsfiddle

<div class='container'>
  <img src='image.jpg' />
</div>

.container {
  padding: 20%;
  background-color: blue;
}

img {
  width: 100%;
}

In questo modo puoi centrare un'immagine in verticale ( demo ):

div{
  height:150px; //IE7fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom:0.25em;
}

Inoltre, puoi utilizzare Flexbox per ottenere il risultato corretto:

.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/-128.png" />
</div>


La mia soluzione: http://jsfiddle.net/XNAj6/2/

<div class="container">
    <div class="frame">
        <img src="http://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;
}

La migliore soluzione è quella

.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;
}

Non sono sicuro di IE, ma con Firefox e Chrome, se hai un img in un contenitore div , il seguente css dovrebbe funzionare. Almeno per me funziona bene:

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

div.img-container img {
    max-height: 450px;
    max-width: 490px;
}

Per centrare un'immagine all'interno di un contenitore (potrebbe essere un logo) oltre ad un testo come questo:

Fondamentalmente si avvolge l'immagine

.outer-frame {
  border: 1px solid red;
  min-height: 200px;
  text-align: center; //only for align horizontally
}

.wrapper{
  line-height: 200px;
  border: 2px dashed blue;
  border-radius: 20px;
  margin: 50px
}

img {
//height: auto;
  vertical-align: middle;
}
<div class="outer-frame">
  <div class="wrapper">
    some text
    <img src="http://via.placeholder.com/150x150">
  </div>
</div>


Potresti fare questo:

dimostrazione

http://jsfiddle.net/DZ8vW/1

CSS

.frame {
    height: 25px;      /* equals max 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";
})

Potresti provare a impostare il CSS di PI per display: table-cell; vertical-align: middle; display: table-cell; vertical-align: middle;


Puoi provare sotto il codice

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



Soluzione a 3 linee:

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

Questo vale per qualsiasi cosa.

Da here


Una soluzione CSS PUR:

http://jsfiddle.net/3MVPM/

Il CSS:

.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;  
}

Cose chiave

// position: relative; - in .frame holds the absolute element within the frame
// top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component
// margin: auto; - centers the image horizontally & vertically

Vuoi allineare un'immagine che ha dopo un testo / titolo ed entrambi sono all'interno di un div?

Vedi su JSfiddle o Esegui snippet di codice.

Assicurati di avere un ID o una classe in tutti i tuoi elementi (div, img, titolo, ecc.).

Per me funziona questa soluzione su tutti i browser (per i dispositivi mobili è necessario adattare il proprio codice con: @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 alligned after image inside a div by negative manipulate the img postion</h2>
</div>


che ne dici di questo?

position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
line-height: 1em;

e puoi variare font-size


http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* equals max 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;
}

La proprietà della chiave è visualizzata: table-cell; per .frame. Div.frame viene visualizzato come in linea con questo, quindi è necessario avvolgerlo in un elemento di blocco.

Funziona in FF, Opera, Chrome, Safari e IE8 +.

AGGIORNARE

Per IE7 è necessario aggiungere un'espressione css:

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

La soluzione di matejkramny è un buon inizio, ma le immagini di grandi dimensioni hanno un rapporto sbagliato.
Ecco la mia forchetta:

demo: https://jsbin.com/lidebapomi/edit?html,css,output

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






vertical-alignment