-1
我想在中心顯示我的頁面（寬度：80％auto;）我正在使用Center類，但它不工作。任何人都可以告訴我如何顯示我的頁面兩側保留20％的餘量。如何在中心顯示我的頁面，兩邊都有20％的邊距？
這裏是我的源代碼（HTML）
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
<title>GR PROVIDER</title>
</head>
<body>
<div class="wrapper">
<div class="center">
<div class="Header">
<div class="heading">
<h2> Gulf Resources Provider </h2>
</div>
<div class="socialmedia">
<ul>
<li> <a href=""> <img src="GRProvider/Facebook.jpg"> </a> </li>
<li> <a href=""> <img src="GRProvider/LinkedIn.jpg"></a> </li>
<li> <a href=""> <img src="GRProvider/Google.jpg"> </a> </li>
<li> <a href=""> <img src="GRProvider/Twitter.jpg"> </a> </li>
</ul>
</div>
</div>
<div class="images">
<div class="pics">
<img src="GRProvider/Img.jpg" />
</div>
<div class="pics">
<img src="GRProvider/Img_2.jpg"/>
</div>
</div>
<div class="diagram">
<div class="sample">
<img src="GRProvider/Img_3.jpg"/>
</div>
<div class="sample">
<img src="GRProvider/Img_4.jpg"/>
</div>
</div>
<div class="main_content">
<div class="navigation">
<ul>
<li> <a href="#"> HOME </a> </li>
<li> <a href="#"> ABOUT US </a> </li>
<li> <a href="#"> CAREER </a> </li>
<li> <a href="#"> CONTACT US </a> </li>
</ul>
</div>
<div class="Slider">
<div class="slider_img">
<img src="GRProvider/Slider.jpg">
</div>
</div>
</div>
<div class="Info">
<div class="About_Us">
<p> Lorem Ipsum is simply dummy text of the printing and typesetting indutry. Lorem Ipsum has been
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has bee
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has bee
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has Lorem Ipsum is simply dummytextoftheprintingandtypesettingindustry.LoremIpsum............. </p>
</div>
<div class="button">
<button type="button"> READ MORE </button>
</div>
</div>
<div class="content">
<div class="text">
<img src="GRProvider/Img_4.jpg" />
<h4> PRODUCT INFORMATION </h4>
<h5> consectetur adipiscing elit. Etiam tristique tristique any
varius. Donec nec vestibulum ligula. Aenean turpis do
feugiat a luctus in, rhoncus risus. Maecenas dui\vitae
consequat massa imperdietut. elit ut tempus lobortis,
eros leo molestie velit, nonegestas augue nulla </h5>
</div>
<div class="text">
<img src="GRProvider/Img_5.jpg" />
<h4> PRODUCT INFORMATION </h4>
<h5> consectetur adipiscing elit. Etiam tristique tristique any
varius. Donec nec vestibulum ligula. Aenean turpis do
feugiat a luctus in, rhoncus risus. Maecenas dui\vitae
consequat massa imperdietut. elit ut tempus lobortis,
eros leo molestie velit, nonegestas augue nulla </h5>
</div>
<div class="text">
<img src="GRProvider/Img_6.jpg" />
<h4> PRODUCT INFORMATION </h4>
<h5> consectetur adipiscing elit. Etiam tristique tristique any
varius. Donec nec vestibulum ligula. Aenean turpis do
feugiat a luctus in, rhoncus risus. Maecenas dui\vitae
consequat massa imperdietut. elit ut tempus lobortis,
eros leo molestie velit, nonegestas augue nulla </h5>
</div>
</div>
<div class="footer">
<h6> Copyright by Bitsprovider.com </h6>
</div>
</div>
</div>
</body>
</html>
這裏是我的CSS代碼（mystyle.css）
* {
margin: 0;
padding: 0;
}
body {
background-color: #1e93a5;
width: 80% auto;
}
.wrapper {
float: left;
width: 100%;
}
.center {
float: left;
width: 80% auto;
}
.header {
float: left;
width: 100%;
}
.heading {
float: left;
width: 70%;
}
h2 {
color: #fff;
padding: 0 25%;
}
.socialmedia {
float: left;
width: 30%;
}
.images {
display: inline-block;
float: left;
width: 18%;
}
.pics img {
display: inline-block;
width: 100%;
}
.diagram {
display: inline-block;
float: right;
width: 18%;
}
.sample img {
width: 100%;
}
.main_content {
float: left;
position: static;
width: 60%;
}
.navigation {
float: left;
width: 100%;
}
.navigation > ul {
float: left;
width: 100%;
}
.navigation > ul li {
float: left;
list-style: outside none none;
text-decoration: none;
width: 25%;
}
.navigation > ul li a {
background-color: #2dacbe;
color: black;
float: left;
text-align: center;
text-decoration: none;
width: 100%;
}
.slider {
float: left;
width: 1%;
}
.slider > img {
width: 139%;
}
ul {
float: left;
width: 100%;
}
li {
float: left;
list-style: outside none none;
text-decoration: none;
width: 11%;
}
a {
border: 1px solid #0e8393;
color: black;
float: left;
text-align: center;
text-decoration: none;
width: 100%;
}
.info {
float: left;
width: 100%;
}
.About_Us {
float: left;
width: 100%;
}
p {
background-color: #2ea4b6;
color: #fff;
float: left;
text-align: justify;
width: 100%;
}
.button {
float: right;
}
.content {
float: left;
width: 100%;
}
.text {
float: left;
width: 33%;
}
.text > img {
}
h4 {
background-color: #263270;
color: #fff;
width: 93%;
}
h5 {
color: #fff;
width: 100%;
}
.footer {
float: left;
width: 100%;
}
h6 {
color: #fff;
text-align: center;
}
1它應該是'margin：auto'，而不是'width'和2個元素左移，所以它們不會顯示居中。 –
[需要幫助在頁面上集中div類的可能的重複]（http://stackoverflow.com/questions/29881384/need-help-centering-a-div-class-on-page） – Mogsdad
20％的餘量每一方也意味着你的內容只能是60％而不是80％ –