javascript - 居中 slider 元素符号

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

或

您可以使用 transform 将 #slideshownav 居中:

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