CSS 센터링 슬라이드 쇼 이미지

Question

모든 슬라이드 크기 이미지를 중앙에서 볼 수 있도록 슬라이드 쇼 이미지를 가로로 놓는 데 문제가 있습니다.

html로이가 일치하는 등

<div id='banner'> 
    <div class='slides_container'> 
     <div> 
      <a href='#'><img src='images/banner.png'></a> 
     </div> 
     <div> 
      <a href='#'><img src='images/banner2.png'></a> 
     </div> 
    </div> 
</div> 

그리고 CSS로 보이는 : 정말 이후의 모든 화면 크기에 중앙에 이미지를 얻기 위해 여기 고군분투

#banner { 
    width:100%; 
    margin-bottom:50px; 
} 

.slides_container { 
    width:100%; 
    height:500px; 
} 

.slides_container div { 
    width:1100px; 
    height:500px; 
    text-align:center; 
} 

패딩과 마진 do not work 다른 방법이 필요합니다!

모든 답변은 대단히 감사하겠습니다.

Answer 1

당신은 .slides_container div은 부모의 내부 중앙에 있는지 확인해야을 추가, 즉

.slides_container div { 
    margin: 0px auto; // center 
    width:1100px; 
    height:500px; 
    text-align:center; 
} 

문제가 해결되지 않으면, 당신은 반드시 부모 컨테이너를 만들 필요가 페이지 너비는 100 %입니다. 그래도 문제가 해결되지 않으면, 당신은 부모가 100 % 확인해야을

.slides_container { 
    margin: 0px auto; 
} 

:

부모 페이지의 100 % 폭 있지 않은 경우는, 부모는이 속성을 가질 필요 페이지 너비

희망이 도움이됩니다.

편집

나는 방화범 그것을보고했다, 그리고 슬라이드 컨테이너 폭 3800px로 설정되고, 사업부 내부 폭이 설정되지 않음을 즉시 명백했다. 슬라이드 컨테이너 안에 div를 100 % 너비로 설정하면 너비가 3800 픽셀이되어 작동하지 않습니다.

사용중인 스크립트의 특성상 abolute-positioned div를 사용하고 있습니다. 따라서 margin: 0px auto은 여기서 작동하지 않습니다.

해결책은 onload를 실행하고 창의 크기를 조정할 때 이미지를 브라우저 창 너비로 유지하는 div를 설정하고 JavaScript를 text-align : center로 설정하는 것입니다. 내가 1280px 와이드 모니터를 갖고 있기 때문에 그래서 예를 들어,이 날 이미지를 센터 : 화면에 결과가 전혀 변경되지 않은 사실 불행하게도이 센터링을 달성하지 않은 반응에 대한

이

.slides_control div { 
    width: 1280px; 
    text-align: center; 
} 

Answer 2

일반적으로이 주소는 margin:0 auto;을 사용합니다. text-align은 div에 도움이되지 않습니다.

Answer 3

.slides_container img 및 margin:0 auto

#banner { width:100%; margin-bottom:50px; } 

.slides_container { 
    width:100%; 
    height:500px; 
} 

.slides_container div, .slides_container img { 
    width:1100px; 
    height:500px; 
    text-align:center; 
    margin:0 auto; }