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

Question

我找遍了所有地方，但找不到这个问题的答案。我正在尝试使用 fotorama 在引导网页上创建照片库，但 fotorama div 一直显示在页面的左侧。我在不同的地方尝试过 margin: 0 auto，我尝试添加 text-center 和 center-block 类，但没有任何效果。 fotorama js(我认为)中的某些东西导致图像不居中。我试图构建一个 js fiddle ，但我不太确定如何使用它 - 抱歉。任何帮助将不胜感激。 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>

Answer 1

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

.fotorama__wrap {
margin: 0 auto; }