中心3 divs进行幻灯片放映

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

在上一页和下一页箭头上使用绝对位置应该可以做到这一点

here is an example

<强> CSS：

#stanga img{
margin : 30px;
}

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

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