vertical center Một hình ảnh mà không biết kích thước

Question

Tôi đã tập trung nhiều thứ vào sự nghiệp phát triển web của mình, nhưng tôi đã tự hỏi liệu có cách đơn giản để căn giữa hình ảnh theo chiều dọc mà không biết kích thước của hình ảnh hay không. Hãy tưởng tượng một danh sách thu nhỏ tôi nhận được từ cơ sở dữ liệu. Tôi không muốn mọi mục được gắn bó với phần trên cùng của div phụ huynh.

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

Answer 1

Bạn có thể sử dụng CSS này vào cha mẹ của bạn:

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

Lưu ý rằng điều này sẽ làm cho các yếu tố phụ huynh cư xử như một yếu tố nội tuyến.

Example.

Answer 2

#parent img{vertical-align:middle;} 

Answer 3

Bạn có thể sử dụng này:

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

Kiểm tra này trong fiddle quá http://jsfiddle.net/kYgqx/2/

Answer 4

Nếu thiết kế của bạn không cho phép bạn thực hiện parent inline (nếu có, sử dụng giải pháp Purmou, nó là tốt hơn) , bạn có thể đặt line-height trên parent bằng height và vertical-align: middle; trên img của mình.

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

Output:

Answer 5

Có một t rick để làm điều này, ngay cả khi không có Javascript. Những gì chúng tôi cần ist để biết chiều cao của phụ huynh và chúng tôi cũng cần thêm một thẻ nữa.

Đầu tiên, thêm một SPAN-tag trước hoặc sau khi IMG-Tag:

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

Với điều này, việc kê khai CSS sau gắn các hình ảnh như muốn:

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

này nên làm việc thậm chí cho IE6 và 7.

Edit:

• Giải pháp ThinkingStiffs đơn giản hơn và do đó tốt hơn. Tôi chỉ không làm việc trong IE6.

• giải pháp Purmous không làm việc cho IE6 và 7, xem The display declaration

Answer 6

Tôi tìm thấy điều này trong khi tìm kiếm một giải pháp cho một vấn đề tương tự các giải pháp sử dụng CSS3 như vậy sẽ không hoạt động trên IE8 và dưới .

Trong khi đây là một câu hỏi cũ tôi đã tìm ra câu trả lời cập nhật có thể có ích cho một ai đó:

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

Xem fiddle này: http://jsfiddle.net/E9sTk/