Question

我一直在制作一个旋转木马，但似乎是显示：在firefox中框不是很好玩而且它忽略了应该发生的垂直/水平对齐。我已经插入了bootstrap，所以我不确定那里是否存在问题。

我把它放在了一个codepen上。此外，如果有人能告诉我为什么我的按钮在悬停/访问时没有正确设置为白色，这将是很好的。

.carousel-content {
  position: absolute;
  z-index: 20;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  width: 100%;
  height: 100%;
  text-align: center;
  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}

<div class="container-fluid">
  <!-- carousel -->
  <div id="carousel-generic" class="carousel slide" data-ride="carousel">
    <div class="carousel-content">
      <div class="carousel-title-container col-sm-12">
        <div class="carousel-title">Titles go in here</div>
        <a class="btn button" href="#" role="button">Get in touch <span class="custom-glyph ">›</span></a>
      </div>
    </div>
    <div class="carousel-inner">
      <div class="active item">
        <img src="images/1800500.png" alt="..." class="img-responsive">
      </div>
      <div class="item">
        <img src="images/1800500.png" alt="..." class="img-responsive">
      </div>
      <div class="item">
        <img src="images/1800500.png" alt="..." class="img-responsive">
      </div>
    </div>
  </div>
</div>

Answer 1

对于flexbox，此问题已在this post中得到解答。

关于按钮悬停：

btn.hover {
   color: #333;
}

正在覆盖你的

button:hover {
   color #FFFFFF;
}

尝试使用上面的方法（btn：hover）而不是按钮：hover

或者你可以尝试在颜色后面使用！important：#FFFFFF来覆盖它。

希望这有帮助！

Carousel div overlay，忽略-moz-box-align center

1 个答案: