jquery - 将 3 个 div 居中以制作幻灯片

Question

我正在使用 twitter bootstrap，我想制作几张图片的幻灯片：

我已经设法使用以下代码在模态 div 中显示我需要的图像：

<div id="imgContainer" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;">
  <div id="stanga" style="height:100%;">
    <img src="./img/stanga.png" style="padding-top:50%;position:absolute;">
  </div>
  <div id="pozica">
    <img src="./lucrari/BRD1.png">
  </div>
  <div id="dreapta" style="float:right;">
    <img src="./img/dreapta.png">
  </div>
</div>

我得到的结果是这样的：

我怎样才能实现这样的目标？我的意思是主照片和左右按钮居中？

Answer 1

尝试每次更改背景的 CSS3 动画（CSS 关键帧）。JQuery 也有为此创建幻灯片的解决方案。

Answer 2

CSS代码：

.modal hide fade in{
position:relative;
}
#stanga , #pozica , #dreapta{
position:absolute;
left:50%;
right:50%;
top:50%;
bottom:50%;
}

对于下一个和上一个按钮，您可以使用：

#nxt{
float:right;
z-index:100
}
#prv{
float:left;
z-index:100
}

Answer 3

在上一个和下一个箭头上使用绝对位置应该可以解决问题

这是一个例子

CSS：

#stanga img{
margin : 30px;
}

#pozica,#dreapta{
  position: absolute;
  top: 110px
}

#dreapta{
    right: 5px;
}
#pozica{
    left: 5px;
}