css - Fotorama:尝试在 bootstrap 中将fotorama div居中

我到处都看过，但找不到答案。我正在尝试使用fotorama在引导程序网页上创建照片库，但是fotorama div始终显示在页面的左侧。我尝试过margin：在各个地方使用0自动，我尝试添加text-center和center-block类，但没有任何效果。 fotorama js中的某些问题（我认为）导致图像无法居中。我试图构造一个js小提琴，但不确定如何操作-抱歉，任何帮助将不胜感激。
http://jsfiddle.net/q5ujq37n
这是我的html代码：

<div id="menu2" class="tab-pane fade">
          <h3 class="text-warning">Thunder and lightning</h3>
          <p>text here</p>
          <div class="container-fluid" style="margin: 0 auto !important;">
          <div class="container-fluid fotorama" style="margin: 0 auto !important;" data-autoplay="true" data-width="50%" data-ratio="700/467" data-max-width="100%" data-allowfullscreen="true">

              <img  src="img/snow2.jpg">
              <img  src="img/snow1.jpg">
              <img  src="img/snow3.jpg">
              <img  src="img/snow4.jpg">
              <img  src="img/snow5.jpg">
              <img  src="img/snow6.jpg">
              <img  src="img/snow7.jpg">

          </div>
          </div>
      </div>

最佳答案

只需将以下CSS代码添加到fotorama.css :)

.fotorama__wrap {
margin: 0 auto; }

关于css - Fotorama:尝试在 bootstrap 中将fotorama div居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37491286/