Dọc thẳng hàng một div vị trí tuyệt đối bên trong một div chứa

Question

Tôi đang sử dụng plugin jQuery Cycle để xoay hình ảnh theo kiểu trình chiếu kiểu. Điều đó hoạt động tốt. Vấn đề tôi gặp phải là nhận được những hình ảnh này (có kích thước khác nhau) để tập trung vào div chứa. Các hình ảnh nằm trong một div slidshow có vị trí của nó được đặt thành tuyệt đối bởi plugin Cycle.

Tôi đã thử đặt chiều cao dòng/thẳng đứng và không có gì nhưng không có xúc xắc. Dưới đây là HTML có liên quan và CSS

HTML:

<div id="projects"> 
    <div class="gallery"> 
    <span class="span1">&#9668;</span><span class="span2">&#9658;</span> 
     <div class="slideshow"> 
      <img src="images/img1.png" /> 
      <img src="images/img1.png" /> 
      <img src="images/img1.png" /> 
     </div> 
    </div> 
</div> 

CSS:

#main #home-column-2 #projects 
{ 
    width: 330px; 
    background: #fefff5; 
    height: 405px; 
    padding: 12px; 
} 

#main #home-column-2 #projects .gallery 
{ 
    width: 328px; 
    height: 363px; 
    position: relative; 
    background: url('images/bg-home-gallery.jpg'); 
} 

#main #home-column-2 #projects .gallery img 
{ 
    position: relative; 
    z-index: 10; 
} 

Và trong trường hợp bạn muốn nhìn thấy nó, jQuery:

$('#home-column-2 #projects .gallery .slideshow').cycle(
{ 
    fx: 'scrollHorz', 
    timeout: 0, 
    next: "#home-column-2 #projects .gallery span.span2", 
    prev: "#home-column-2 #projects .gallery span.span1" 
}); 

Bất kỳ ý tưởng về việc đưa những hình ảnh này vào trung tâm?

Answer 1

Các vị trí tương đối theo biểu định kiểu, do đó bạn đã thử đặt chúng thành display: block và margin-top: auto; margin-bottom: auto;?

Một tùy chọn khác là sắp xếp chúng theo cách thủ công trong javascript dựa trên chiều cao của div chứa.

Answer 2

Hãy thử điều này:

http://www.brunildo.org/test/img_center.html

định tâm Vertical là một nỗi đau! Dưới đây là những gì trang W3C nói về trung tâm dọc:

Cấp CSS 2 không có tài sản để căn giữa mọi thứ theo chiều dọc. Có có thể là một trong CSS cấp 3. Nhưng ngay cả trong CSS2, bạn có thể căn giữa các khối theo chiều dọc, bằng cách kết hợp một vài thuộc tính . Bí quyết là chỉ định rằng khối ngoài là được định dạng dưới dạng ô bảng, vì nội dung của ô bảng có thể là được căn giữa theo chiều dọc.

Answer 3

Phương pháp này liên quan đến một chút jquery, nhưng hoạt động tuyệt vời trong hầu hết các tình huống ... cho tôi giải thích:

nếu tất cả những hình ảnh của slideshow được chứa trong riêng phần tử div pos của họ: tuyệt đối và những hình ảnh là pos: tương đối, sau đó trên một $ (cửa sổ) .load() bạn có thể chạy một .each() và tìm mỗi img trong slideshow và điều chỉnh vị trí hàng đầu của nó để được bù đắp một số điểm ảnh nhất định từ trên cùng.

jcycle tự động đặt mỗi div cha mẹ chứa hình ảnh thành vị trí: tuyệt đối trên mọi() vì vậy việc sử dụng điều chỉnh pos này cho chúng là vô ích. .. thay vì nhắm mục tiêu mỗi img bạn đã thiết lập để pos: tương đối ...

Dưới đây là ví dụ:

$(window).load(function() { 

    // move all slides to the middle of the slideshow stage 
    var slideshowHeight = 600; //this can dynamic or hard-coded 

    $('.slideImg').each(function(index) { 

    var thisHeight = $(this).innerHeight(); 
    var vertAdj = ((slideshowHeight - thisHeight)/2); 
    $(this).css('top', vertAdj); 

    }); 

}); 

và đây là html nó làm việc trên ...

<div class="slideshow" style="position: relative; "> 

    <div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img0"> 
     <img class="slideImg" src="/images/picture-1.jpg" style="top: 0px; "><!-- the style=top:0 is a result of the jquery --> 
    </div> 


    <div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img1"> 
     <img class="slideImg" src="/images/picture-1.jpg" style="top: 89.5px; "><!-- the style=top:89.5px is a result of the jquery --> 
    </div> 


    <div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img2"> 
     <img class="slideImg" src="/images/picture-1.jpg" style="top: 13px; "><!-- the style=top:13px is a result of the jquery --> 
    </div> 


</div> 

chỉ cần đảm bảo

.slideImg { 
    position:relative; 
} 

Tôi nghĩ đó là tất cả mọi thứ ... Tôi có một ví dụ, nhưng đó là trên một trang web dev .. vì vậy liên kết này có thể không kéo dài .. nhưng bạn có thể tham gia một xem xét tại đây: http://beta.gluemgmt.com/portfolio/rae-scarton-editorial.html

Answer 4

Bạn cần lồng hai div trong mỗi mục chu kỳ. Đầu tiên phải có màn hình: inline-table; và thứ hai phải có màn hình: ô bảng; cả hai div này đều có chiều dọc: giữa.

Vì vậy, cấu trúc sẽ giống như thế này:

<div class="slide-container"> 
    <div class="slide"> 
     <div class="outer-container"> 
      <div class="inner-container"> 
       Centered content 
      </div> 
     </div> 
    </div> 

    <div class="slide"> 
     <div class="outer-container"> 
      <div class="inner-container"> 
       Centered content 
      </div> 
     </div> 
    </div> 
</div> 

Với css sau:

.slide-container { 
    height: 300px; 
} 
.outer-container { 
    height: 300px; 
    display: inline-table; 
    vertical-align: middle; 
} 
.inner-container{ 
    vertical-align: middle; 
    display: table-cell; 
} 

Bạn có thể nhìn thấy nó làm việc ở đây http://jsfiddle.net/alsweeet/H9ZSf/6/