级别滑块 - Responsive/Centered 标题

Question

我已经在我的网站上下载并实施了 Nivo Slider。自实施以来，我发现了一些错误，但我正在寻求帮助，让我的字幕在屏幕上居中。

Margin:auto 通常为此工作以确保 div 始终居中（我认为..） - 但我无法让它与我的网站一起工作..

我的HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Max Klimmek - Portfolio, Clothing, Travel</title>
      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/style.css">
      <link rel="stylesheet" href="fonts/font-awesome-4.5.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
      <script src="script/jquery.nivo.slider.js" type="text/javascript"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
      <script src="script/jquery.nivo.slider.pack.js" type="text/javascript"></script>
      <meta name="viewport" content="width=device-width">

        <script type="text/javascript">
          $(window).load(function() {
          $('#slider').nivoSlider()          
          });
        </script>

  </head>
  <body>

      <header id="site-header">
        <div class="row">
            <nav class="nav">
                <ul>
                    <li><a href="index.html" class="selected"><i class="fa fa-shield"></i></a></li>
                    <li><a href="index.html" class="selected">Home</a></li>
                    <li><a href="index.html" class="selected">Portfolio</a></li>
                    <li><a href="index.html" class="selected">Clothing</a></li>
                    <li><a href="index.html" class="selected">Gallery</a></li>
                    <li><a href="index.html" class="selected">Resume</a></li>
                </ul>
            </nav>
        </div>
      </header>
      <div class="wrapper">
          <div id="slider" class="nivoSlider">
              <img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
              <img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
              <img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
              <img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
          </div>

          <div id="htmlcaption1" style="display:none">
          <div class="nivo-caption1" >Simple. <br> Clean.</div>
       </div>

      </div>

  </body>
</html>

我的 CSS 标题：

    .nivo-caption1 {
    position: absolute;
    margin:auto;
    top: 5%;
    overflow:hidden;
    background:none;
    font-family: 'Gotham';
    color:#FFF;
    font-weight:bold;
    font-size:50px;
    line-height:44px;
    text-align:center;
    text-transform:uppercase; /* converts text to UPPERCASE */
}

如果我删除 Margin-Top，标题甚至不会出现。我已将 margin:auto 添加到包含此 caption/slider 的所有其他 div .

任何人都知道我如何确保 nivo-caption 始终居中，即使在我调整浏览器大小时也是如此 window?

附件是现在的照片..

任何帮助都会很棒！

谢谢，最大值enter image description here

Answer 1

当您修改 class 名称时，我相信如果您为 div 设置宽度，然后使用 margin-left:auto 和margin-right:auto，元素应该居中。

.nivo-caption { 
width:300px; 
margin-left:auto;
margin-right:auto;
}

这假设您没有其他元素迫使该元素无法移动。

Answer 2

margin:auto 不适用于此特定情况的原因是 two-fold。

您需要设置宽度。
标题是绝对定位的，这将覆盖它。即使您确实设置了宽度，在这种情况下也无所谓。

滑块绝对定位即可。如果你不这样做，我认为结果不会太好。此处需要做的就是设置标题的 left 属性，以便将标题推到屏幕中央。

为此，您需要计算滑块宽度与标题宽度之间的差值，并将结果分成两半。这将为您提供正确的金额。看起来滑块跨越了页面的整个宽度，因此我们需要动态计算此差异，因为当 window 大小发生变化时，滑块的宽度也会发生变化。我们需要 javascript 的一点帮助才能完成这项工作。

这样的事情可能会有所帮助：

function centerCaption(){ var caption = $('.nivo-caption'); caption.css('left', ($('#slider').width() - caption.width()) / 2); }

这是一个精简的工作示例： https://jsfiddle.net/sm1215/ma645ao8/2/

Answer 3

所以我找到了解决问题的办法。我不确定这是否是正确的编码方式，但它确实有效。如果有人看到我的代码将来可能会如何导致问题，请告诉我。

我在 css 中添加了一些代码，它解决了所有问题。

我的HTML和上面一模一样：

<!DOCTYPE html>
<html>
  <head>
    <title>Max Klimmek - Portfolio, Clothing, Travel</title>
      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/style.css">
      <link rel="stylesheet" href="fonts/font-awesome-4.5.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
      <script src="script/jquery.nivo.slider.js" type="text/javascript"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
      <script src="script/jquery.nivo.slider.pack.js" type="text/javascript"></script>
      <meta name="viewport" content="width=device-width">

        <script type="text/javascript">
          $(window).load(function() {
          $('#slider').nivoSlider()          
          });
        </script>

  </head>
  <body>

      <header id="site-header">
        <div class="row">
            <nav class="nav">
                <ul>
                    <li><a href="index.html" class="selected"><i class="fa fa-shield"></i></a></li>
                    <li><a href="index.html" class="selected">Home</a></li>
                    <li><a href="index.html" class="selected">Portfolio</a></li>
                    <li><a href="index.html" class="selected">Clothing</a></li>
                    <li><a href="index.html" class="selected">Gallery</a></li>
                    <li><a href="index.html" class="selected">Resume</a></li>
                </ul>
            </nav>
        </div>
      </header>
      <div class="wrapper">
          <div id="slider" class="nivoSlider">
              <img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
              <img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
              <img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
              <img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
          </div>

          <div id="htmlcaption1" style="display:none">
          <div class="nivo-caption1" >Simple. <br> Clean.</div>
       </div>

      </div>

  </body>
</html>

NivoCaption 容器的新 CSS：

/* Caption styles */
.nivo-caption {
    position: absolute;
    justify-content: center;
    margin-left: -150px;
    margin-top: -200px;
    width: 100%;
    font-family: 'Gotham', sans-serif;
    color:#FFF;
    font-weight:bold;
    font-size:45px;
    line-height:44px;
    text-align:center;
    text-transform:uppercase; /* converts text to UPPERCASE */
}

.nivo-caption1 {
    position: absolute;
    margin: auto;
    margin-top:5px;
}

我为确保中心对齐而添加的部分是：

justify-content: center;
margin-left: -85px;
margin-top: -200px;
width: 100%;

现在我只需要找出解决此滑块的其他错误的方法即可：

暂停时间未应用于所有幻灯片。
字幕加载延迟。

为你们的帮助干杯！

最大

级别滑块 - Responsive/Centered 标题

Nivo Slider - Responsive/Centered Caption

html

javascript

css

jquery

nivo-slider