我已经在我的网站上下载并实现了Nivo Slider。自实现以来，我发现了一些错误，但我正在寻找帮助，让我的标题集中在屏幕上。
保证金：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添加到包含此标题/滑块的所有其他div。
任何人都有任何想法，即使我调整浏览器窗口的大小，我仍然可以确保nivo-caption始终居中？
附件是现在看起来的照片..
任何帮助都会很棒！
答案 0 :(得分：1)
原因保证金：auto不适用于这种特殊情况是双重的。
可以将它完全放在滑块上。如果你不这样做，我认为它不会很好。这里需要做的就是在标题上设置left属性，以便将标题推到屏幕中心。
为了做到这一点，你需要计算滑块宽度和标题宽度之间的差异，并将结果除以一半。这将为您提供正确的金额。看起来滑块跨越页面的整个宽度，因此我们需要动态计算这个差异，因为当窗口大小改变时，滑块的宽度也会改变。我们需要javascript的一些帮助才能实现这一目标。
这样的事情可能有所帮助：
function centerCaption(){
var caption = $('.nivo-caption');
caption.css('left', ($('#slider').width() - caption.width()) / 2);
}
这是一个精简的工作示例： https://jsfiddle.net/sm1215/ma645ao8/2/
答案 1 :(得分：0)
当您修改类名时，我相信如果您为div设置宽度然后使用margin-left：auto和margin-right：auto，则元素应居中。
.nivo-caption {
width:300px;
margin-left:auto;
margin-right:auto;
}
这假设您没有其他元素强制该元素无法移动。
答案 2 :(得分：0)
所以我找到了解决问题的方法。我不确定这是不是应该编码的正确方法，但是它有效..如果有人能看到我的代码将来可能会导致问题，请告诉我。
我在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%;
现在我只需用这个滑块找出其他bug的解决方案：
为你的帮助人干杯！
最高