centro verticale un'immagine senza conoscere le dimensioni

Question

Ho centrato un sacco di cose nella mia carriera di sviluppo del Web, ma mi chiedevo se esiste un modo semplice per centrare un'immagine verticalmente senza conoscere le dimensioni dell'immagine. Immagina una lista di miniature che ottengo dal database. Non voglio che ogni elemento si attacchi alla parte superiore del div genitore.

<div id="wrapper"> 
    <div id="parent"> 
     <img src="path/i/got/from/database/image.png" /> 
    </div> 
</div> 

Answer 1

È possibile utilizzare questo CSS sul vostro genitore:

#parent { 
    display:table-cell; 
    vertical-align:middle; 
} 

Si noti che questo renderà l'elemento padre si comportano come un elemento inline.

Example.

Answer 2

#parent img{vertical-align:middle;} 

Answer 3

È possibile utilizzare questo:

#wrapper{  
height: 100%; 
min-height: 500px;/*Assuming min-height of the container*/ 
position: relative; 
width: 100%;} 

#parent{  
border: 1px solid; 
height: 50px; 
position: absolute; 
top: 50%; 
width: 50px;} 

controllare questo violino troppo http://jsfiddle.net/kYgqx/2/

Answer 4

Se il progetto non consente di effettuare parent in linea (se lo fa, usare la soluzione di Purmou, è meglio) , è possibile impostare line-height su parent uguale al suo height e vertical-align: middle; sul img.

Demo: http://jsfiddle.net/ThinkingStiff/YRGBk/

HTML:

<div id="wrapper"> 
    <div id="parent"> 
     <img src="http://placehold.it/200x200" /> 
    </div> 
</div> 

CSS:

img { 
    vertical-align: middle; 
} 

#parent { 
    height:400px; 
    border:1px solid black; 
    line-height: 400px; 
} 

uscita:

Answer 5

C'è una t rick per farlo, anche senza Javascript. Quello di cui abbiamo bisogno è conoscere l'altezza del genitore e abbiamo anche bisogno di un altro tag.

In primo luogo, aggiungere uno SPAN-tag prima o dopo l'IMG-Tag:

<div id="wrapper"> 
    <div id="parent"> 
     <span>&nbsp;</span><img src="path/i/got/from/database/image.png" /> 
    </div> 
</div> 

Con questo, la seguente dichiarazione CSS allinea l'immagine come voleva:

#parent { 
    height: 500px;  /* This height is important for the following lines */ 

    line-height: 500px; /* Text-content needs to get full height for the 
          'vertical-align'-attribute to work */ 
} 
#parent span { 
    display: inline-block; /* Should work even for IE6/7 in this case */ 

    height: 500px;   /* Needed for IE */ 

    width: 10px; 
    margin-right: -10px; /* Any element to the right is pushed to the left 
          offset of the SPAN-tag */ 
} 
#parent img { 
    vertical-align: middle; /* Aligns the image in the middle of the SPAN-tag */ 
} 

questo dovrebbe funzionare anche per IE6 e 7.

Edit:

• La soluzione ThinkingStiffs è più semplice e quindi migliore. Semplicemente non funziona in IE6.

• soluzione Purmous non funziona per IE6 e 7, vedere The display declaration

Answer 6

Ho trovato questo durante la ricerca di una soluzione ad un problema simile alla soluzione utilizza CSS3 in modo non funziona su IE8 e al di sotto .

Mentre questa è una vecchia questione ho pensato una risposta aggiornata potrebbe essere utile a qualcuno:

<div id="wrapper"> 
    <div id="parent"> 
     <img src="path/i/got/from/database/image.png"> 
    </div> 
</div> 

#parent{ 
    width:400px; 
    height:400px; 
    background:red; /* just used to highlight box */ 
    text-align:center; 
}  
#parent img{ 
    position:relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Vai a questa violino: http://jsfiddle.net/E9sTk/