Question

这与其他问题类似，但有一个额外的问题，我找不到与我有同样问题的人。

我的图像宽度为1400像素，即使用户正在浏览800px分辨率的浏览器，我也希望它能够在页面中间居中。

我无法使用BackGround图像，因为我需要使用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 */
}

我在最近的一篇文章中看过这种技巧。

即使内容比屏幕宽，也以div为中心

1 个答案: