центрирование div, даже если содержимое шире экрана

Question

Это похоже на другие вопросы, но с одной дополнительной проблемой, и я не могу найти никого с той же проблемой, что и я.

У меня есть изображение шириной 1400 пикселей и которое я хочу быть центрированным в середине страницы, даже если пользователь просматривает браузер с разрешением 800 пикселей.

Я не могу использовать обратное изображение, потому что мне нужно повернуть это изображение несколькими другими, используя плагин цикла jquery.

Как я нашел в центр изображения с помощью:

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.

У вас есть идеи?

Answer 1

Попробуйте это:

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

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

Я видел эту технику в недавнем сообщении.