Центрирование div, содержащего изображения

Я пытаюсь центрировать изображения, но не смог это сделать. Я добавил margin: auto; к изображениям, но не работает. При удалении 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>

поэтому я предлагаю, чтобы центрировать дивы вместо этого, и адаптировать изображение на ширину сНа ... Единственная проблема с моим решением, может в изображения разных размеров.

U может проверить мой пример теребит: http://jsfiddle.net/zsfjL/11/ http://jsfiddle.net/zsfjL/10/embedded/result/

источник

2013-08-23 18:20:59 cl0udw4lk3r

Добавить margin-left: половину общей ширины элемента (отрицательное значение) и left:50%

Css:

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

Фидл: http://jsfiddle.net/Vs65D/show

источник

2013-08-23 16:40:11

При центрирования изображения с полем: 0 auto ", вам также понадобится объявление« 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% от его контейнера. Это приводит к возврату строки до и после нее.

Когда мы хотим центрировать элемент уровня блока, обычно переопределять ширину, а затем задавать margin: 0 auto; Когда мы хотим центрировать встроенный объект, text-align: center; это обычное явление.

В вашем случае я бы начал с установки положения: относительный; и укажите ширину на каруселе div #, которая указана при использовании правила float. Является ли позиция абсолютной необходимостью на вашем карусели div и изображения div? Если это так, я бы добавил display:block;margin:0 auto; в ваши правила .image img.

источник

2013-08-23 18:20:03 ph33nyx

Центрирование div, содержащего изображения

ответ

Смежные вопросы