2013-09-25 2 views
0

이것은 다른 질문과 유사하지만 추가 문제가 하나있어서 나와 같은 문제가있는 사람을 찾을 수 없습니다.내용이 화면보다 넓은 경우에도 div를 가운데에 맞 춥니 다

나는 이미지가 너비가 1400 픽셀이고 사용자가 800px 해상도의 브라우저를 통해보고 있어도 페이지 중앙에 위치하기를 원합니다.

jquery주기 플러그인을 사용하여 다른 이미지와 함께이 이미지를 회전해야하기 때문에 BackGround 이미지를 사용할 수 없습니다.

의 I는 사용하여 이미지의 중심을 찾을 방법 :

div.slideshowWrap { 
    position: relative; 
    width: 100%; 
    overflow: hidden; 
} 
    div.slideshowWrap div.homeslideshow { 
    position: relative; 
    width: 10000px; 
    left: 50%; 
    margin: 0 0 0 -5000px; 
    text-align: center; 
} 

<div class="slideshowWrap"> 
    <div class="homeslideshow"> 
     <?php echo $this->Html->image('background_01.jpg');?> 
    </div> 
</div> 

작품,하지만 난 그게 위치를 엉망으로 JQuery와 사이클에 필요한 여분의 슬라이드를 추가 할 때 ...

<div class="slideshowWrap"> 
    <div class="homeslideshow"> 
     <?php echo $this->Html->image('background_01.jpg');?> 
    </div> 
    <div class="homeslideshow"> 
     <?php echo $this->Html->image('background_02.jpg');?> 
    </div> 
    <div class="homeslideshow"> 
     <?php echo $this->Html->image('background_03.jpg');?> 
    </div> 
</div> 

이 문제를 해결하는 가장 좋은 방법은 무엇입니까? 이미지를 중심에 두는 방법은 보이지 않고 배경 만있는 것처럼 보입니다. 하지만 jquery cycle plugin처럼 백그라운드를 페이드 인/페이드 아웃 할 방법이 없습니다.

누구나 아이디어가 있습니까?

+1

jsfiddle 추가 ... – Alvaro

+0

클래스의'.homeslideshow'가 이미 센터에 있습니까? –

+0

첫 번째 예에서는 배경 이미지가 1 개만있는 경우 .homeslideshow가 가운데에 있습니다. 두 번째 예제와 같이 더 많은 이미지를 추가하면 모두 잘못됩니다. –

답변

0

이 시도 :

.homeslidshow { 
    position: relative; /* if there is no position applied already */ 
} 

.homeslideshow > img{ 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    /* and your width here */ 
} 

나는 최근 게시물에이 기술을 볼 수 있었다.

+0

이것은 나를 위해 작동하지 않습니다. 내 문제는 너무 jquery주기 플러그인을 사용하는 것입니다. :( –

관련 문제