0
嘿傢伙我想爲我的網站幻燈片放映中心，如果任何人都可以幫助它將不勝感激。CSS HTML，如何集中幻燈片
問題 我想中心的標誌，整個幻燈片放映，你可以看到它有點向右 PROBLEM(IMG)
CODE
body {
background: #E9E9E9;
}
div.box {
display: block;
text-align: center;
margin: auto;
z-index: 5
}
#navMenu {
margin: 0;
padding: 0;
}
#navMenu ul {
margin: 0;
padding: 0;
line-height: 30px;
}
#navMenu li {
margin: 0;
padding: 0;
list-style: none;
position: relative;
background: #999;
}
#navMenu > ul > li {
float: left;
width: 12.5%;
/* Set width here (100/8 items) */
}
#navMenu ul li a {
text-align: center;
text-decoration: none;
height: 30px;
display: block;
color: #FFF;
border: 1px solid #000;
text-shadow: 1px 1px 1px #000;
}
#navMenu ul ul {
position: absolute;
width: 100%;
visibility: hidden;
bottom: 100%;
}
#navMenu ul li:hover ul {
visibility: visible;
}
#navMenu li:hover {
background: #09F;
}
#navMenu ul li:hover ul li a:hover {
background: #CCC;
color: #000;
}
#navMenu a:hover {
color: #000;
}
.clearFloat {
clear: both;
margin: 0;
padding: 0;
}
h3 {
color: #e1c184 text-align: center;
}
/**********end drop down menu*********/
/**********Start slideshow************/
.slideshow {
position: relative;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.slideshow .css-img {
width: 90%
height:90%;
max-width:90%
max-height:90%;
position: absolute;
opacity: 0;
-webkit-animation-name: css-animation-fade;
-webkit-animation-duration:30s;
-webkit-animation-iteration-count:infinite;
}
.slideshow .css-img:nth-child(2) {
-webkit-animation-delay:5s;
}
.slideshow .css-img:nth-child(3) {
-webkit-animation-delay:10s;
}
.slideshow .css-img:nth-child(4) {
-webkit-animation-delay:15s;
}
.slideshow .css-img:nth-child(5) {
-webkit-animation-delay:20s;
}
.slideshow .css-img:nth-child(6) {
-webkit-animation-delay:25s;
}
@-webkit-keyframes css-animation-fade {
from { opacity:0;}
5% {opacity:1;}
15% {opacity:1;}
20% {opacity: 0;}
to {opacity: 0;}
}<!DOCTYPE html>
<html>
<head>
\t <title>Paid Templates Packages</title>
\t \t <link rel="stylesheet" href="paid.css" media="screen" title="no title" charset="utf-8">
\t <link href="paid.css" rel="stlesheet" type="text/css">
</head>
<body>
<div class="box">
<a href="index.html"><img src="icon1.png" width="50%" height="50%"></a>
\t <div id="wrapper">
\t <div id="navMenu">
\t <ul>
\t <li><a href="index.html">Home</a>
\t <ul>
\t </ul> <!-- end inner UL-->
</li> <!-- end main LI -->
\t </ul><!-- end main UL -->
\t \t <ul>
\t <li><a href="about.html">About Me</a>
\t <ul>
\t <li><a href="game.html">Games</a></li> \t
\t <li><a href="info.html">Information</a></li> \t
\t </ul> <!-- end inner UL-->
</li> <!-- end main LI -->
\t </ul><!-- end main UL -->
\t \t <ul>
\t <li><a href="sm.html">Social Media</a>
\t <ul>
\t
\t </ul> <!-- end inner UL-->
</li> <!-- end main LI -->
\t </ul><!-- end main UL -->
\t \t <ul>
\t <li><a href="p.html">Packages</a>
\t <ul>
\t \t <li><a href="custom(p).html">Custom Work</a></li> \t
\t <li><a href="download(p).html">Download</a></li> \t
\t <li><a href="template(p).html">Templates</a></li> \t
<li><a href="paid(p).html">Paid Templates</a></li> \t
\t </ul> <!-- end inner UL-->
</li> <!-- end main LI -->
\t </ul><!-- end main UL -->
\t \t <ul>
\t <li><a href="gd.html">Graphic Design</a>
\t <ul>
\t <li><a href="custom(gd).html">Custom Work</a></li> \t
\t <li><a href="download(gd).html">Download</a></li> \t
\t <li><a href="template(gd).html">Templates</a></li> \t
<li><a href="paid(gd).html">Paid Templates</a></li> \t
\t </ul> <!-- end inner UL-->
</li> <!-- end main LI -->
\t </ul><!-- end main UL -->
\t \t <ul>
\t <li><a href="wd.html">Web Design</a>
\t <ul>
\t <li><a href="custom(wd).html">Custom Work</a></li> \t
\t <li><a href="download(wd).html">Download</a></li> \t
\t <li><a href="template(wd).html">Templates</a></li> \t
<li><a href="paid(wd).html">Paid Templates</a></li> \t
\t
\t </ul> <!-- end inner UL-->
</li> <!-- end main LI -->
\t </ul><!-- end main UL -->
\t \t <ul>
\t <li><a href="products.html">Products</a>
\t <ul>
\t <li><a href="shop.html">Shop</a></li> \t
\t <li><a href="cart.html">My Cart</a></li> \t
\t </ul> <!-- end inner UL-->
</li> <!-- end main LI -->
\t </ul><!-- end main UL -->
\t \t <ul>
\t <li><a href="cm.html">Contact Me</a>
\t <ul>
\t </ul> <!-- end inner UL-->
</li> <!-- end main LI -->
\t </ul><!-- end main UL -->
\t <br class="clearFloat">
\t </div> <!--end navMenu -->
\t </div> <!--end wrapper div -->
<div class="slideshow">
<img src="icon1.png" class="css-img">
<img src="icon1.png" class="css-img">
<img src="icon1.png" class="css-img">
<img src="icon1.png" class="css-img">
<img src="icon1.png" class="css-img">
<img src="icon1.png" class="css-img">
</div>
</div>
</body>
</html>當我嘗試加載我的網站在鉻th Ë幻燈片去一點點的權利，如果有人能幫助我們將不勝appreaciated，在此先感謝 親切的問候 Zefrolity
在「運行SNIPPET」這表明他們怎麼想，但，當他們消失了第二個圖像淡入第一個圖像等等
你能提供一個網站的鏈接？ – Ionut
我的意思是我把它加載到chrome上它不是一個合適的網站 – zefrolity
in'.slideshow .css-img' css class replace'position：absolute;'到'位置：相對;' – Amit