轮播 div 覆盖，忽略 -moz-box-align center [重复]答案

【问题标题】：Carousel div overlay, ignoring -moz-box-align center [duplicate]轮播 div 覆盖，忽略 -moz-box-align center [重复]
【发布时间】：2016-09-07 00:42:27
【问题描述】：

我一直在制作轮播，但似乎 display:box 在 Firefox 中表现不佳，并且忽略了应该发生的垂直/水平对齐。我已经插入了引导程序，所以我不确定那里是否存在问题。

http://codepen.io/Leifmao/pen/WwmdyY

我已经把它放在了一个代码笔上。另外，如果有人能告诉我为什么我的按钮在悬停/访问时没有正确设置为白色，那就太好了。

.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>

【问题讨论】：

那是 flexbox 语法的旧版本，不是吗...我怀疑你需要更新你的代码 - stackoverflow.com/questions/16280040/…

标签： html css twitter-bootstrap

【解决方案1】：

关于flexbox，这个问题已经在this post回答了。

关于按钮悬停：

btn.hover {
   color: #333;
}

正在覆盖您的

button:hover {
   color #FFFFFF;
}

尝试使用上面的 (btn:hover) 而不是 button:hover

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

希望这会有所帮助！

【讨论】：