포함 div의 절대 위치 div 정렬하기

Question

슬라이드 쇼 형식으로 이미지를 회전하기 위해 jQuery Cycle 플러그인을 사용하고 있습니다. 그건 잘 작동합니다. 내가 가지고있는 문제는 포함 된 div의 가운데에 이러한 이미지 (다른 크기의 이미지)를 가져 오는 것입니다. 이미지는 Slidshow div 안에 있으며 Cycle 플러그인에 의해 절대 위치로 설정됩니다.

나는 line-height/vertical-align과 그 외의 주사위를 설정하려고했지만 주사위는 사용하지 않았다.

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

그리고 경우에 당신이 그것을보고 싶어, 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" 
}); 

모든 아이디어를 여기에 관련 HTML과 CSS는

HTML입니다 이 이미지들을 중심에 두는 것에?

Answer 1

위치는 스타일 시트에 따라 상대적이므로 display: block 및 margin-top: auto; margin-bottom: auto;으로 설정하려고 했습니까?

또 다른 옵션은 포함 된 div의 높이를 기반으로 자바 스크립트에서 수동으로 정렬하는 것입니다.

Answer 2

이 시도 :

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

수직 중심이 고통입니다! 다음은 W3C 페이지에서 세로 중심에 대해 말한 내용입니다.

CSS 레벨 2에는 속성을 수직으로 배치하기위한 속성이 없습니다. 거기에 은 아마도 CSS 레벨 3의 하나가 될 것입니다. CSS2에서도 몇 가지 속성을 조합하여 블록 을 세로로 가운데에 배치 할 수 있습니다. 트릭은 표 셀의 내용이 세로로 가운데에 일 수 있으므로 외부 블록을 표 셀로 지정하여 으로 지정하는 것입니다.

Answer 3

이 방법은 약간의 jQuery를 포함하지만, 대부분의 상황에서 환상적인 작품 ... 는 설명해 보자

을 슬라이드 쇼의 모든 이미지가 자신의 요소 사업부의 POS에 포함되어있는 경우 : 절대 그 이미지는 pos : relative입니다. $ (window) .load()에서 .each()를 실행하고 슬라이드 쇼에서 각 img를 찾고 상단에서 특정 수의 픽셀을 오프셋하도록 상단 위치를 조정할 수 있습니다.

jcycle은 모든 onafter()에서 pos : absolute로 이미지를 포함하는 각 parent div를 자동으로 설정하므로이 pos 조정을 적용 할 필요가 없습니다. 여기

은 예입니다 ... 상대 :

$(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); 

    }); 

}); 

를이는 작업 년대 HTML입니다 ... .. 대신 각 당신이 POS에 설정 한 IMG 대상

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

은

.slideImg { 
    position:relative; 
} 

확인 내가 예를 가지고 ... 그 모든 것을 생각하게하지만, 그래서이 링크가 지속되지 않을 수도 있습니다 .. dev에 사이트입니다 ...하지만 당신은 걸릴 수 있습니다 여기를보십시오 : http://beta.gluemgmt.com/portfolio/rae-scarton-editorial.html

Answer 4

각주기 항목 안에 두 개의 div가 중첩되어야합니다. 첫 번째는 디스플레이가 있어야합니다 : inline-table; 두 번째는 display : table-cell; 두 div는 모두 vertical-align : middle을가집니다. 다음 CSS를

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

:

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

현재 http://jsfiddle.net/alsweeet/H9ZSf/6/