我已经在我的网站上下载并实现了 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 添加到包含此标题/ slider 的所有其他 div。
任何人都知道如何确保 nivo-caption 始终居中，即使在我调整浏览器窗口大小时也是如此？
附件是它现在的样子的照片..
任何帮助都会很棒!
谢谢， 马克斯 enter image description here
最佳答案
margin:auto 不适用于这种特殊情况的原因有两个。
- 您需要设置宽度。
- 标题是绝对定位的，这将覆盖它。即使您确实设置了宽度，在这种情况下也没关系。
为 slider 绝对定位就可以了。如果你不这样做，我认为结果不会太好。此处需要做的就是设置标题的 left 属性，以便将标题推到屏幕中央。
为此，您需要计算 slider 宽度与标题宽度之间的差异，并将结果分成两半。这将为您提供正确的金额。看起来 slider 跨越了页面的整个宽度，因此我们需要动态计算此差异，因为当窗口大小发生变化时， slider 的宽度也会发生变化。我们需要 javascript 的一点帮助才能完成此操作。
这样的事情可能会有所帮助:
函数 centerCaption(){
var caption = $('.nivo-caption');
caption.css('left', ($('#slider').width() - caption.width())/2);
}
这是一个精简的工作示例: https://jsfiddle.net/sm1215/ma645ao8/2/
关于javascript - Nivo Slider - 响应式/居中字幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35213151/