Nivo滑块 - 响应/居中标题

我已经下载并实施了我的网站上的Nivo滑块。自实施以来，我发现了一些错误，但我正在寻求帮助，让我的标题集中在屏幕上。Nivo滑块 - 响应/居中标题

保证金：汽车通常适用于本保证一个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添加到包含此标题/滑块的所有其他div。

任何人有任何想法，我怎么可以确保nivo字幕总是居中，即使我调整浏览器窗口的大小？

附件中是现在的样子照片..

任何帮助将是巨大的！

感谢，最大enter image description here

来源

2016-02-04 maxklimmek

目前，您的班级被称为“nivo-caption1”，但您试图设计“nivo-caption”样式。那只是一个错字吗？如果没有，你应该开始分配正确的课程。 – Patrick

于是我找到了解决我的问题。我不确定是否应该编码的正确方式，但它的工作原理..如果任何人都可以看到我的代码将来可能会导致问题，请让我知道。

我在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>

新建CSS的NivoCaption容器：

/* 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%;

现在我只需要解决找出与此滑块的其他错误：

pauseTime没有被应用到所有幻灯片。
字幕加载延迟。

为您的干杯帮助家伙！

最大

来源

2016-02-05 11:41:09 maxklimmek

当你解决你的类的名字，我相信，如果您设置一个宽度你的DIV，然后使用保证金左：自动和保证金权：汽车，元素应该居中。

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

这里假设您没有其他元素强制该元素无法移动。

来源

2016-02-04 22:53:36 ketchupisred

我不认为类名有什么不同，对nivo-caption所做的任何编辑都将正确应用于nivo-caption1类。应用建议的修复程序后，它的行为与以前一样，当我更改margin-left/right to auto ..会发生什么，div现在在滑块下方移动。该div是居中，但它不覆盖滑块div .. 任何其他的想法？ – maxklimmek

原因保证金：汽车不适用于这种特殊情况是双重的。

您需要设置宽度。
标题被绝对定位，这将覆盖它。即使你设定了一个宽度，在这种情况下也无关紧要。

可以将它完全放置在滑块上。如果你不这样做，我认为它不会奏效。所有需要在这里完成的是在标题上设置左侧属性，以便将标题推到屏幕中央。

为了做到这一点，您需要计算滑块宽度和标题宽度之间的差异，并将结果除以一半。这会给你正确的金额。它看起来像滑块横跨页面的整个宽度，所以我们需要动态计算这种差异，因为当窗口大小改变时，滑块的宽度也会改变。我们需要javascript的帮助来实现这一点。

像这样的东西可能会有所帮助：

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

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

来源

2016-02-04 23:30:24 sm1215

我已经实现了你在小提琴中发布的内容，这也不能解决问题。事情是，当窗口被调整大小时，滑块的宽度实际上会改变宽度。我的问题是，即使屏幕被调整大小，标题也不会居中在滑块上。你的解决方案到目前为止还没有解决我的问题，但我可以从理论上看到你的想法。但是现在标题永久地位于屏幕的左侧，我认为还有其他一些css在这里工作覆盖我的地方。 – maxklimmek

可能还有其他样式正在从其他地方应用，但如果不检查网站本身。我在jsfiddle中发布的代码只是一个示例，需要稍微修改才能使用。例如，类名称不同。很高兴你找到了解决方案，但其余的祝你好运！ – sm1215

Nivo滑块 - 响应/居中标题

回答

相关问题