Nivo 滑块 - 响应式/居中的字幕
Posted
技术标签:
【中文标题】Nivo 滑块 - 响应式/居中的字幕【英文标题】：Nivo Slider - Responsive/Centered Caption 【发布时间】：2016-05-14 18:44:38 【问题描述】：我已在我的网站上下载并实施了 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" title="#htmlcaption1"/>
<img src="img/cover1.jpg" title="#htmlcaption1"/>
<img src="img/cover.jpg" title="#htmlcaption1"/>
<img src="img/cover1.jpg" 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-caption 始终居中？
附上一张它现在的样子..
任何帮助都会很棒！
谢谢， 马克斯enter image description here
【问题讨论】：
目前您的课程名为“nivo-caption1”，但您正在尝试设置“nivo-caption”的样式。那只是一个错字吗？如果没有，你应该从分配正确的类开始。 【参考方案1】：margin:auto 不适用于这种特殊情况的原因有两个。
-
您需要设置宽度。
标题是绝对定位的，这将覆盖它。即使您确实设置了宽度，在这种情况下也没关系。
为滑块绝对定位是可以的。如果你不这样做，我认为效果不会太好。这里需要做的就是在标题上设置 left 属性，以便将标题推到屏幕的中心。
为此，您需要计算滑块宽度与标题宽度之间的差异，并将结果除以一半。这将为您提供正确的金额。看起来滑块跨越了页面的整个宽度，所以我们需要动态计算这个差异，因为当窗口大小发生变化时，滑块的宽度也会发生变化。我们需要 javascript 的一些帮助来完成此操作。
这样的事情可能会有所帮助：
function centerCaption()
var caption = $('.nivo-caption');
caption.css('left', ($('#slider').width() - caption.width()) / 2);
这是一个精简的工作示例： https://jsfiddle.net/sm1215/ma645ao8/2/
【讨论】：
我已经实现了你在小提琴中发布的内容，这也不能解决问题。问题是，当调整窗口大小时，滑块的宽度实际上会改变宽度。我的问题是标题不在滑块的中心，即使调整屏幕大小也是如此。到目前为止，您的解决方案还没有解决我的问题，但我可以从理论上看到您认为应该如何。但是现在标题永久定位在屏幕的左侧，我认为这里还有其他一些 css 在工作，覆盖了我的.. 有可能从其他地方应用了其他样式，但如果不检查站点本身就很难判断。我在 jsfiddle 中发布的代码只是一个示例，需要稍微修改才能正常工作。例如，类名不同。很高兴您找到了解决方案，祝您好运！【参考方案2】：当你修改你的类名时，我相信如果你给你的 div 设置一个宽度，然后使用 margin-left:auto 和 margin-right:auto，元素应该居中。
.nivo-caption
width:300px;
margin-left:auto;
margin-right:auto;
这假设您没有其他元素会强制该元素无法移动。
【讨论】：
我认为类名没有区别，对 nivo-caption 所做的任何编辑都将正确应用于 nivo-caption1 类。在应用您建议的修复后，它的行为就像以前一样当我将 margin-left/right 更改为 auto.. 发生的情况是，div 现在移动到滑块下方。 div 居中，但没有覆盖在滑块 div 上。还有其他想法吗？【参考方案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" title="#htmlcaption1"/>
<img src="img/cover1.jpg" title="#htmlcaption1"/>
<img src="img/cover.jpg" title="#htmlcaption1"/>
<img src="img/cover1.jpg" 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%;
现在我只需要用这个滑块找出其他错误的解决方案：
-
pauseTime 未应用于所有幻灯片。
字幕加载延迟。
为你们的帮助干杯！
最大
【讨论】：
以上是关于Nivo 滑块 - 响应式/居中的字幕的主要内容，如果未能解决你的问题，请参考以下文章