이미지가 포함 된 div를 가운데에 놓습니다.

이미지를 가운데에 놓으려고하는데 실패했습니다. 나는 마진을 추가했다 : 자동차; 이미지는 있지만 작동하지 않습니다. float을 제거 할 때 : left; 회전 목마에서 구조가 엉망이됩니다.이미지가 포함 된 div를 가운데에 놓습니다.

어떻게 이미지를 가운데에 배치 할 수 있습니까?

감사

<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 

     <script type="text/javascript"> 
      $(document).ready(function() 
      { 
       var showing_default = true; 
       var did_scroll = false; 

       $(window).on("scroll", function (e) 
       { 
        did_scroll = true; 
       }); 

       window.setInterval(function() 
       { 
        if (did_scroll) 
        { 
         did_scroll = false; 

         if (showing_default && $(document).scrollTop() >= 100) 
         { 
          showing_default = false; 
          $("#header").css('position', 'fixed'); 
          $("#default").stop().hide(); 
          $("#sticky").fadeIn(500); 
         } 
         else if (! showing_default && $(document).scrollTop() < 100) 
         { 
          showing_default = true; 
          $("#sticky").stop().hide(); 
          $("#default").fadeIn(500); 
          $("#header").css('position', 'fixed'); 
         } 
        } 
       }, 250); 
      }); 
     </script> 

     <style> 
      * 
      { 
       margin: 0px; 
       padding: 0px; 
      } 
      #header, #default, #carousel, #body, #footer 
      { 
       display: block; 
       width: 100%; 
      } 
      /* --- HEADER ------------------------------------------------------------------ */ 
      #header, #default, #sticky 
      { 
       background: #EEEEEE; 
      } 
      #header 
      { 
       position: fixed; 
       z-index: 100; 
       border-bottom: 1px solid #CCCCCC; 
      } 
      #default 
      { 
       height: 100px; 
      } 
      #sticky 
      { 
       display: none; 
       height: 50px; 
      } 
      /* --- CAROUSEL ---------------------------------------------------------------- */ 
      #carousel 
      { 
       margin-top: 101px; 
       float: left; 
       height: 400px; 
       background: #FFFFFF; 
      } 
      #images 
      { 
       position: absolute; 
      } 
      .image 
      { 
       display: none; 
       position: absolute; 
       width: 900px; 
       height: 400px; 
      } 
      .image img 
      { 
       width: 900px; 
       height: 400px; 
      } 
      .first 
      { 
       display: block; 
      } 
      /* --- BODY -------------------------------------------------------------------- */ 
      #body 
      { 
       background: #EEEEEE; 
      } 
      /* --- FOOTER ------------------------------------------------------------------ */ 
      #footer 
      { 
       background: #DDDDDD; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="header"> 
      <div id="default">DEFAULT HEADER</div> 
      <div id="sticky">STICKY HEADER</div> 
     </div> 

     <div id="carousel"> 
      <div id="images"> 
       <div class="image first"><img src="images/1.jpg" /></div> 
       <div class="image"><img src="images/2.jpg" /></div> 
       <div class="image"><img src="images/3.jpg" /></div> 
       <div class="image"><img src="images/4.jpg" /></div> 
      </div> 
     </div> 

     <div id="body">TOP<br /><br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br /><br />BOTTOM</div> 

     <div id="footer">FOOTER</div> 
    </body> 
</html>

출처

2013-08-23 BentCoder

는이 같은 구조를 사용했다 :

<div id="images"> 
    <div id="image">...</div> 
    <div id="image">...</div> 
    <div id="image">...</div> 
    <div id="image">...</div> 
</div>

그래서 내가 대신 div의 중심을, 그리고 ... 내 솔루션에 독특한 문제가있다 DIV 폭에 이미지를 적용하는 것이 좋습니다 다른 크기의 이미지. U 내 예를 확인할 수 있습니다

는 놀아 날 : http://jsfiddle.net/zsfjL/11/ http://jsfiddle.net/zsfjL/10/embedded/result/

출처

2013-08-23 18:20:59 cl0udw4lk3r

가

CSS를 margin-left: 절반 요소 (음의 값)과 left:50%의 전체 폭의 추가

가

#images 
    { 
     position: absolute; 
     margin-left: -450px; 
     left: 50%; 
    }

바이올린 :

출처

2013-08-23 16:40:11

http://jsfiddle.net/Vs65D/show 이미지를 센터링 할 때 "margin : 0" 자동 "선언을 사용하려면"display : block "선언이 필요합니다 (div 요소는이를 필요로하지 않습니다).

.photo { display: block; margin: 0 auto; }

출처

2013-08-23 16:43:14

몇 가지 다른 경로가 답을주기 전에 내가 조금 설명 할 수 있도록 당신이 여기에 갈 수있다 ... 브렌든 쌀 오른쪽 여백입니다 : 0 자동; 블록 수준 요소에서만 작동하며 IMG는 기본적으로 블록 수준이 아닙니다. 또한 요소가 작동하려면 100 % 미만의 지정된 너비가 필요하다는 것을 추가해야합니다.

브라우저는 각 HTML 개체에 CSS로 재정의 할 수있는 기본 속성을 할당합니다. 표시는이 요소가 제어 할 흐름 및 공간의 유형을 설명하는 규칙입니다 (자세한 내용은 여기 http://css-tricks.com/almanac/properties/d/display/). 블록 레벨 요소 (DIV 또는 P 태그와 같은)는 기본적으로 컨테이너의 너비가 100 %입니다. 이로 인해 행의 전후에 행이 리턴됩니다.

블록 레벨 요소를 가운데 맞추려면 폭을 재정의 한 다음 여백을 설정하는 것이 일반적입니다. 0 자동; 우리가 인라인 객체를 중심에 배치하려면 text-align : center; 관례입니다.

귀하의 경우, 나는 position : relative를 설정함으로써 시작할 것입니다. float 규칙을 사용할 때 div # 컨베이어에 표시된 너비만큼 너비를 지정하십시오. 위치 : 회전식 div 및 이미지 div에 절대적으로 필요합니까? 그렇다면 .image img 규칙에 display:block;margin:0 auto;을 추가합니다.

출처

2013-08-23 18:20:03 ph33nyx

이미지가 포함 된 div를 가운데에 놓습니다.

답변

관련 문제