Pionowy środek obrazu bez znajomości wymiarów

Question

Skupiłem wiele rzeczy w mojej karierze webdevelopment, ale zastanawiałem się, czy istnieje prosty sposób centrowania obrazu w pionie bez znajomości wymiarów obrazu. Wyobraź sobie listę miniatur, które dostaję z bazy danych. Nie chcę, aby każdy element był przyklejony do górnej części div rodzica.

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

Answer 1

Można użyć tego CSS na swojej dominującej:

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

Zauważ, że uczyni to element rodzic zachowuje się jak element inline.

Example.

Answer 2

#parent img{vertical-align:middle;} 

Answer 3

Można to wykorzystać:

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

sprawdzić w skrzypcach zbyt http://jsfiddle.net/kYgqx/2/

Answer 4

Jeśli projekt nie pozwala, aby parent inline (jeśli tak, należy użyć roztworu Purmou jest, to lepiej) , możesz ustawić line-height na parent równą jego height i vertical-align: middle; na swoim 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; 
} 

wyjściowa:

Answer 5

Jest t Rick to zrobić, nawet bez JavaScript. To, czego potrzebujemy, to znać wysokość rodziców i potrzebujemy jeszcze jednego tagu.

pierwsze, dodać SPAN-tag przed lub po IMG-Tag:

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

z tym, następujące oświadczenie CSS wyrównuje obraz jako Poszukiwany

#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 */ 
} 

to powinno działać nawet dla IE6 i 7.

Edit:

• Rozwiązanie ThinkingStiffs jest prostsze, a przez to lepsze. Po prostu nie działa w IE6.

• rozwiązanie Purmous nie działa dla IE6 i 7, zobacz The display declaration

Answer 6

Znalazłem to podczas poszukiwania rozwiązania podobnego problemu Rozwiązanie wykorzystuje CSS3 tak nie będzie działać na IE8 i niższych .

Chociaż jest to stare pytanie Pomyślałem uaktualniony odpowiedź może być przydatne dla kogoś:

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

Zobacz ten skrzypce: http://jsfiddle.net/E9sTk/