嘿伙计们，如果有人能提供帮助，我想把我的幻灯片放在我的网站中心。非常感谢。
问题 我想将徽标和整个幻灯片放在中心，因为你可以看到它有点向右 PROBLEM(IMG)
代码
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>
<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>
当我尝试在Chrome上加载我的网站时，幻灯片显示有点向右，如果有人可以提供帮助，那么将会有很大的帮助，提前谢谢 亲切的问候 Zefrolity
在＆＃34; RUN SNIPPET＆＃34;它向我们展示了我的想法，但是当它们逐渐消失时，第二张图像在第一张图像下逐渐消失，依此类推
答案 0 :(得分：0)
尝试在CSS中添加以下内容：
#include<iostream>
#include<string>
#include "TicTacToe.h"
using namespace std;
TicTacToe::TicTacToe()
{
for (int i = 0; i < SIZE; i++)
{
results[i] = 0;
for (int j = 0; j < SIZE; j++)
{
table[i][j] = 0;
}
}
}
void TicTacToe::setMove(int place, int player)
{
int field = place;
if (field == 1)
{
if (table[0][0] == 0)
{
table[0][0] = player;
}
else
{
cout << "\nYou cannot make this move this place is already occupied.Please choose another Field\n";
cin >> field;
cin.ignore();
setMove(field, player);
}
}
else if (field == 2)
{
if (table[0][1] == 0)
{
table[0][1] = player;
}
else
{
cout << "You cannot make this move this place is already occupied.Please choose another Field\n";
cin >> field;
cin.ignore();
setMove(field, player);
}
}
else if (field == 3)
{
if (table[0][2] == 0)
{
table[0][2] = player;
}
else
{
cout << "You cannot make this move this place is already occupied.Please choose another Field\n";
cin >> field;
cin.ignore();
setMove(field, player);
}
}
else if (field == 4)
{
if (table[1][0] == 0)
{
table[1][0] = player;
}
else
{
cout << "You cannot make this move this place is already occupied.Please choose another Field\n";
cin >> field;
cin.ignore();
setMove(field, player);
}
}
else if (field == 5)
{
if (table[1][1] == 0)
{
table[1][1] = player;
}
else
{
cout << "You cannot make this move this place is already occupied.Please choose another Field\n";
cin >> field;
cin.ignore();
setMove(field, player);
}
}
else if (field == 6)
{
if (table[1][2] == 0)
{
table[1][2] = player;
}
else
{
cout << "You cannot make this move this place is already occupied.Please choose another Field\n";
cin >> field;
cin.ignore();
setMove(field, player);
}
}
else if (field == 7)
{
if (table[2][0] == 0)
{
table[2][0] = player;
}
else
{
cout << "You cannot make this move this place is already occupied.Please choose another Field\n";
cin >> field;
cin.ignore();
setMove(field, player);
}
}
else if (field == 8)
{
if (table[2][1] == 0)
{
table[2][1] = player;
}
else
{
cout << "You cannot make this move this place is already occupied.Please choose another Field\n";
cin >> field;
cin.ignore();
setMove(field, player);
}
}
else if (field == 9)
{
if (table[2][2] == 0)
{
table[2][2] = player;
}
else
{
cout << "You cannot make this move this place is already occupied.Please choose another Field\n";
cin >> field;
cin.ignore();
setMove(field, player);
}
}
}
int TicTacToe::chkWin()
{
for (int i = 0; i < SIZE; i++)
{
if (table[i][0] == table[i][1] && table[i][0] == table[i][2])
{
if (table[i][0] == 1)
{
results[0] += 1;
winner = 1;
}
else if (table[i][0] == 2)
{
results[2] += 1;
winner = -1;
}
}
else if (table[0][i] == table[1][i] && table[0][i] == table[2][i])
{
if (table[0][i] == 1)
{
results[0] += 1;
winner = 1;
}
else if (table[0][i] == 2)
{
results[2] += 1;
winner = -1;
}
}
}
if ((table[0][0] == table[1][1] && table[0][0] == table[2][2]) || (table[0][2] == table[1][1] && table[0][2] == table[2][0]))
{
if (table[1][1] == 1)
{
results[0] += 1;
winner = 1;
}
else if (table[1][1] == 2)
{
results[2] += 1;
winner = -1;
}
}
else
{
for (int i = 0; i < SIZE; i++)
{
for (int j = 0; j < SIZE; j++)
{
if(table[i][j] == 0)
{
winner = 2;
}
}
}
results[1] += 1;;
return winner;
}
}
string TicTacToe::getResults(string name1, string name2)
{
return ( name1 + " : " + to_string(results[0]) + "\n"
+ "Draws : " + to_string(results[1]) + "\n"
+ name2 + " : " + to_string(results[2]) + "\n");
}
另外，请将您的身体内容包装在：
body {
width: 100%
}
.content {
width: 1100px;
height: auto;
margin: 0 auto;
}
.slideshow {
position: relative;
width: 1000px;
margin: 0 auto;
}
示例：
<div class="content">
...
</div>
答案 1 :(得分：0)
试试这个：
.slideshow {
position: relative;
margin-left: auto;
margin-right: auto;
}
如果您希望幻灯片显示覆盖整个页面的宽度，请添加：
width: 100%;