Margin: 0 auto;
似乎没有在我的代码中使用包装器div。我似乎把所有东西都集中在一起的唯一方法是添加：
-moz-box-align: center;
到body元素。然而，这会消除导航和顶部页面顶部的整个宽度，我无法找到使用上述代码获得该效果的方法。所以我留下了包装div的中心。但无论我尝试什么，我似乎无法让它以身体元素为中心，它只是坚持左侧。这是我的代码：
<!doctype html>
<html lang="en">
<head>
<title> FearGamers: Home</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="slideshow.css" rel="stylesheet" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="generator" content="Komodo Text editor">
<meta name="Author" content="Richard Ballard">
<meta name="description" content="This page is for other gamers that are curious about our group to find out more information regarding our clan">
<!-- JS Banner -->
<script>
msg = "Welcome to Feargamers. ";
msg += "We are currently recruiting new members ";
msg += "Please feel free to contact us."
spacer = "... ...";
pos = 0;
function ScrollMessage()
{
var newtext = msg.substring(pos, msg.length) + spacer + msg.substring (0, pos);
var td = document.getElementById ("scroll");
td.firstChild.nodeValue = newtext;
pos ++;
if (pos > msg.length) pos = 0;
window.setTimeout ("ScrollMessage ()", 200);
}
</script>
</head>
<body onLoad="ScrollMessage();">
<div id="fb-root"></div> <!-- FB Like -->
<header id="first"> <!-- Page Head -->
<div id="top_banner">
<img src="images/Website icons/uk-flag.ico" alt="UK" />
<p class="login_name"> F.E.A.R.Gamers (User)</p>
<!--<div class="fb-like"
data-href="https://www.facebook.com/groups/437620509632564/" data-width="90"data-layout="button_count" data-action="like" data-show-faces="false" data-share="false">
</div>-->
</div>
<img src="images/Headimg.jpg" alt="Feargamers" />
</header>
<div id="Banner">
<div id="banner">
<table>
<tr>
<td id="scroll" width="100%"  </td>
</tr>
</table>
</div>
</div>
<!-- Main Title -->
<h1 style= "color:#0B4D08; margin-top: 2px"><center>Welcome to Feargamers</center></h1>
<!-- Nav Bar -->
<nav class= "menu">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="#">Squaddies</a>
<ul class ="sub-menu">
<li><a href="#">F.E.A.R Ballard</a></li>
<li><a href="#">F.E.A.R Snakeshit</a></li>
<li><a href="#">Redi</a></li>
</ul>
</li>
<li><a href="#">Gallery</a>
<ul class ="sub-menu">
<li><a href="#">Squad</a></li>
<li><a href="#">Dayz</a></li>
<li><a href="#">Arma III</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul class ="sub-menu">
<li><a href="#">Teamspeak</a></li>
<li><a href="#">E-mail</a></li>
</ul>
</li>
<li><a href="https://www.facebook.com/groups/437620509632564/">Facebook</a></li>
<li><a href="http://steamcommunity.com/groups/Ballard">Steam</a></li>
</ul>
</nav>
<!-- Main Content -->
<div id="wrapper">
<!--
<aside>
<h2 style= "color:#0B4D08">Our Objectives</h2>
<br>
Well if you have met us online you have probably already met most of our team, You already know how we play and whats more you have already been beaten by us.... or beat us...
but let me just say this, we will not give up, we will not run, and we will win.<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<img src="images/soldier2.jpg" alt="Lone Soldier" width="200" height="400">
</aside>
-->
<section><!-- Main part of your page -->
<h1 style= "color:#0B4D08">What do we do!!!</h1>
<article class="first"><!-- Informational section & can use multiple times -->
<p>We play FPS/Strategy style games, we like strategy and enjoy working in a team to achieve our objectives.
For our comms we use Teamspeak. We currently play Arma III, BF4, Dayz, Squad, and occasionally Mass Effect 3.
Squad is our main game to play when we are all together, We enjoy the tacticalism it provides, The environmment of the game, Gameplay and to us its not always about winning, its about taking part and being part of the team.
Dayz was our bread and butter its what got us all working together, Survival against all odds, Outwit the bandits and the hunters, Avoid the zombies and above all else..... Survive!
We dont take any chances when engaging new players especially if they dont co-operate. This is where you will have heard of us or seen our clan tag F.E.A.R, This stands for Fast Effective and Reliable... And we are.
Yes thats right we will leave you fearing contact with us, You will learn to avoid us, You will know not to engage with us.
We have an effective team of experienced players. Some do not carry our tag, Some carry it with pride and some swear by it.</p>
</article>
<!-- Slideshow -->
<div class="container">
<div class="css-slideshow">
<figure>
<img src="images/Squad.jpg" alt="class-header-css3" /><figcaption><strong>CSS3:</strong> CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before.</figcaption>
</figure>
<figure>
<img src="images/Squad1.jpg" alt="class-header-semantics" /><figcaption><strong>Semantics:</strong> Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your users.</figcaption>
</figure>
<figure>
<img src="images/Squad2.jpg" alt="class-header-offline" /><figcaption><strong>Offline & Storage:</strong> Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.</figcaption>
</figure>
<figure>
<img src="images/Squad3.jpg" alt="class-header-device" /><figcaption><strong>Device Access:</strong> Beginning with the Geolocation API, Web Applications can present rich, device-aware features and experiences. Incredible device access innovations are being developed and implemented, from audio/video input access to microphones and cameras, to local data such as contacts & events, and even tilt orientation.</figcaption>
</figure>
<figure>
<img src="images/Squad4.jpg" alt="class-header-connectivity" /><figcaption><strong>Connectivity:</strong> More efficient connectivity means more real-time chats, faster games, and better communication. Web Sockets and Server-Sent Events are pushing (pun intended) data between client and server more efficiently than ever before.</figcaption>
</figure>
<figure>
<img src="images/Squad5.jpg" alt="class-header-multimedia" /><figcaption><strong>Multimedia:</strong> Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action!</figcaption>
</figure>
<figure>
<img src="images/Squad6.jpg" alt="class-header-3d" /><figcaption><strong>3D, Graphics & Effects:</strong> Between SVG, Canvas, WebGL, and CSS3 3D features, you're sure to amaze your users with stunning visuals natively rendered in the browser.</figcaption>
</figure>
<figure>
<img src="images/Squad7.jpg" alt="class-header-performance" /><figcaption><strong>Performance & Integration:</strong> Make your Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2. No user should ever wait on your watch.</figcaption>
</figure>
</div>
</div>
<article class="second"><!-- Informational section & can use multiple times -->
<h2 style= "color:#0B4D08">Looking for a challenge, Tag along today!!</h2>
<p>Are you looking for a challenge in your game, are you ready to try the best, or are you looking for a group to roll with, Why dont you join F.E.A.R...<br />
<br />
<b>1</b>, Take part in our initiation test...<br />
<br />
This involves going through rigourous training, we want to see how well you can move undetected, how well you can communicate with the team, how accurate your aim is, and how steady your nerves are.
How you handle being under-pressure, What you do when facing certain death, Do you avoid, Engage or decide your own path. How you react to being outnumbered and also whether or not you cheat!!! (if you are found to be cheating you will be dismissed from playing with us and banned fromm all our group activities),
We will pitch you against ourselves, see if you can take us all out, we will set an objective for you to capture and hold for five minutes, we will see how well you navigate and use the layout of the map to your
advantage, and further more push you to gain your ultimate gaming experience<br />
<br />
<b>2</b>, Invite us to take on your Clan...<br />
<br />
Rival Clan, Looking for a game and think you can take us on, Think you have an edge against us or have you got a grudge against us...<br>
Well let me tell you now, We will meet you, We will test you, and we will Destroy you...<br />
We have a few rules obviously, and unless you agree to keep them we will not even entertain the thought of letting you experience our style. You break them we will quit straight away, Our games will soon be streamed to elimminate any accusation of cheating, on either side. So if you feel like you want to take us on, Think you got what it takes then feel free to drop us a message, tell us what game that we play of course. We will meet you and state the rules, all matches need to be recorded for evaluation at the end to make sure there is no cheating going on, on either side.</p>
</article>
<footer>
FEARGamers © protection.
</footer>
</section>
</div> <!-- wrapper -->
</body>
CSS：
header, section, footer, aside, nav, article, hgroup {
display: block;
}
body {
background-color: #131617;
margin: 0 auto;
display: -moz-box;
-moz-box-orient: vertical;
width: 100%;
}
header {
width: auto;
height: 250px;
margin: 0 auto;
}
#first {
height: auto;
}
#first img {
display: block;
margin: 0 auto;
border-bottom: 3px solid #183640;
border-right: 3px solid #183640;
border-left: 3px solid #183640;
}
#top_banner {
border: 1px solid black;
width: auto;
height: 30px;
background-color: #0A1B21;
color: white;
text-align: right;
}
#top_banner img {
width: 25px;
height: 25px;
float: right;
margin-right: 15px;
margin-top: 3px;
border-bottom: 0px;
border-right: 0px;
border-left: 0px;
}
.login_name {
font-size: 14px;
margin: 3px;
margin-top: 5px;
margin-right: 10px;
float: right;
text-decoration: underline;
}
#Banner {
width: 752px;
height: auto;
margin: 0;
}
#banner {
margin-top: 20px;
box-shadow: 0px 8px 8px 0px #fff;
width: auto;
}
.menu {
margin: 0px;
width: auto;
}
.menu li {
margin: 0px;
}
/*----- Top Level -----*/
.menu ul li {
display: inline-block;
position: relative;
font-size: 16px;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
color: #000;
}
.sub-menu {
width: auto;
border-top: none;
border-left: 1px solid #183640;
border-right: 1px solid #183640;
margin: 0px;
position: absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
}
.sub-menu li {
display: block;
font-size: 8px;
margin-top: 5px;
padding-bottom: 2px;
border-bottom: 1px solid #183640;
width: auto;
}
.sub-menu li a {
padding:10px ;
margin: 3px;
display: block;
}
nav {
display: inline;
width: 100%;
height: 150px;
background-color: #0A1B21;
}
nav ul {
text-align: center;
padding: 10px;
background-color: #0A1B21;
}
nav li {
width: 105px;
background-color: #0A1B21;
}
nav li a {
padding: 0px;
margin: 1px;
color: #fff;
}
nav li a:link
{
text-decoration: none;
color: #fff;
}
#wrapper {
display: inline-block;
display: -moz-box;
-moz-box-orient: horizontal;
}
section {
width: 1000px;
margin-top: 20px;
background-color: #121516;
border-radius: 50px;
padding: 10px;
box-shadow: 5px 5px 10px 10px #000;
display: -webkit-box; /* This tells the chrome browser to use the tools for flexible boxes */
display: -moz-box;
-moz-box-orient: vertical;
}
article {
width: 900px;
height: auto;
color: #000;
margin-top: 15px;
font-family: verdana, arial;
font-size: 14px;
padding: 20px 10px 20px 10px;
border-top: 1px solid #183640;
border-radius: 15px;
}
article p {
}
.second {
margin-top: 60px;
}
/*aside {
border-top: 1px solid #0B4D08;
border-right: 0px;
border-bottom: 0px;
border-left: 1px solid #0B4D08;
border-radius: 15px;
margin: 0px;
padding-left: 4px;
padding-top: 2px;
padding-bottom: 4px;
color: #000;
width: 180px;
float: right;
clear: both;
font-family: verdana, arial;
font-size: 85%;
}
aside ul {
padding: 0px 0px 0px 20px;
}
aside li {
list-style-type: none;
padding: 2px;
}
aside a:link, a:visited
{
text-decoration: none;
color: #BD1111;
}
aside a:hover
{
color: #BD1111;
background-color: #1f750d;
}
aside h1 {
font-size: 1.5em;
}
aside h2 {
text-decoration: underline;
font-weight: 400;
padding: 2px;
margin: 2px;
text-align: center;
}
*/
footer {
height: 50px;
text-align: center;
border-top: 1px solid #0A1B21;
border-radius: 15px;
margin-top: 20px;
}
h1 {
text-align: center;
text-decoration: underline;
font-size: 2.0em;
font-family: sans-serif;
color: #000;
margin: 10px;
}
h2 {
text-align: center;
text-decoration: underline;
font-family: sans-serif;
}
所以只是回顾一下，我需要将包装器与body元件对中，避免上面提到的尝试过的方法。任何帮助都表示赞赏，因为我现在已经搜索了几个小时，并尝试了各种各样的事情。
答案 0 :(得分：0)
好吧，伙计们对这个有点尴尬，但想通了。在css中的body标签上添加以下代码：
text-align: center;
我认为它只完成了文本，但它也将父标记中的所有div和元素对齐以与中心对齐。
Text是一个内联元素，因此在父标记中使用
会产生这种效果display:inline-block
花了几个小时工作......