中心滑块

Question

我的幻灯片几乎已经完成了，但由于某种原因，我没有将它固定在我的导航子弹中心。现在这是我的脚本（没有JS）：

<style>
h3.slidetext { 
position: absolute; 
font-family: 'Open Sans', Arial;
font-size: 14pt;
font-weight: 300;
letter-spacing: 5px;
top: 100px; 
left: 0; 
width: auto; 
color: #ffffff; 
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px; 
}

#slideshow {position: relative; width: 960px; height: 300px; padding:  10px; box-shadow: 0 0 20px rgba(0,0,0,0.4);}
#slideshow div {position: absolute; top: 10px ; left: 10px; right: 10px; bottom: 10px;}  
#slideshow a {display: block; width: 960px; height: 300px; }    
#slideshow a:hover{background-position: center bottom;}

#slideshownav {background-color: #000; padding-top: 8px; padding-bottom: 20px;}
#slideshownav a.navselected{color:#eb910c;}
span.markup {margin: 10px 10px 0 0; width: 20px; height: 20px; border: solid 3px; #000; border-radius: 50%;}
#slideshownav a {color: #d6d6d6; text-decoration: none; height: 200px;}
#slideshownav a:hover {cursor:pointer;}
</style>

<div id="slideshow">
<div><a href="#" style="background-image: url('banner1.jpg');"></a><h3 class="slidetext">Some text</h3></div>
<div><a href="#" style="background-image: url('banner2.jpg');"></a><h3 class="slidetext">Some text</h3></div>
</div>
<div id="slideshownav">
<a id="nav0" class="navselected"><span class="markup"></span></a>
<a id="nav1"><span class="markup"></span></a>
</div>

我试过了：Margin: 0 auto; text-align: center; display: (inline-)block 这一切都行不通，我只是不再看到了哈哈。

Answer 1

您可以使用text-align将元素置于#slideshownav：

中

<强> CSS

#slideshownav {
  background-color: #000;
  padding-top: 8px;
  padding-bottom: 20px;
  text-align: center;
}

<强> DEMO HERE

或

您可以使用#slideshownav

中心transform

<强> CSS

#slideshownav {
  position: relative;
  background-color: #000;
  padding-top: 8px;
  padding-bottom: 20px;
  text-align: center;
  display: inline-block;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

<强> DEMO HERE