Question

嘿伙计们，如果有人能提供帮助，我想把我的幻灯片放在我的网站中心。非常感谢。

问题我想将徽标和整个幻灯片放在中心，因为你可以看到它有点向右 PROBLEM(IMG)

代码

＆＃13;

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;}
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>Paid Templates Packages</title>
		   <link rel="stylesheet" href="paid.css" media="screen" title="no title" charset="utf-8">
	  <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>

	<div id="wrapper">
	<div id="navMenu">

	<ul>
	<li><a href="index.html">Home</a>
	<ul>



	</ul> <!-- end inner UL-->


    </li> <!-- end main LI -->
	</ul><!-- end main UL -->

		<ul>
	<li><a href="about.html">About Me</a>
	<ul>
	<li><a href="game.html">Games</a></li>	
	<li><a href="info.html">Information</a></li>	



	</ul> <!-- end inner UL-->


    </li> <!-- end main LI -->
	</ul><!-- end main UL -->

		<ul>
	<li><a href="sm.html">Social Media</a>
	<ul>
	
   


	</ul> <!-- end inner UL-->


    </li> <!-- end main LI -->
	</ul><!-- end main UL -->

		<ul>
	<li><a href="p.html">Packages</a>
	<ul>
		<li><a href="custom(p).html">Custom Work</a></li>	
	<li><a href="download(p).html">Download</a></li>	
	<li><a href="template(p).html">Templates</a></li>	
   <li><a href="paid(p).html">Paid Templates</a></li>	




	</ul> <!-- end inner UL-->


    </li> <!-- end main LI -->
	</ul><!-- end main UL -->

		<ul>
	<li><a href="gd.html">Graphic Design</a>
	<ul>
	<li><a href="custom(gd).html">Custom Work</a></li>	
	<li><a href="download(gd).html">Download</a></li>	
	<li><a href="template(gd).html">Templates</a></li>	
   <li><a href="paid(gd).html">Paid Templates</a></li>	


	</ul> <!-- end inner UL-->


    </li> <!-- end main LI -->
	</ul><!-- end main UL -->

		<ul>
	<li><a href="wd.html">Web Design</a>
	<ul>
	<li><a href="custom(wd).html">Custom Work</a></li>	
	<li><a href="download(wd).html">Download</a></li>	
	<li><a href="template(wd).html">Templates</a></li>	
   <li><a href="paid(wd).html">Paid Templates</a></li>	
	


	</ul> <!-- end inner UL-->


    </li> <!-- end main LI -->
	</ul><!-- end main UL -->

		<ul>
	<li><a href="products.html">Products</a>
	<ul>
	<li><a href="shop.html">Shop</a></li>	
	<li><a href="cart.html">My Cart</a></li>	



	</ul> <!-- end inner UL-->


    </li> <!-- end main LI -->
	</ul><!-- end main UL -->

		<ul>
	<li><a href="cm.html">Contact Me</a>
	<ul>



	</ul> <!-- end inner UL-->


    </li> <!-- end main LI -->
	</ul><!-- end main UL -->

	<br class="clearFloat">

	</div> <!--end navMenu -->
	</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>

＆＃13;

当我尝试在Chrome上加载我的网站时，幻灯片显示有点向右，如果有人可以提供帮助，那么将会有很大的帮助，提前谢谢亲切的问候 Zefrolity

在＆＃34; RUN SNIPPET＆＃34;它向我们展示了我的想法，但是当它们逐渐消失时，第二张图像在第一张图像下逐渐消失，依此类推

Answer 1

试试这段代码。当我处于中心位置时，它对我有用

.slideshow {
    position: relative;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

CSS HTML，如何以幻灯片为中心

1 个答案: