我在网页上遇到3个div的问题。我已经尝试在css中使用自动边距和内联块行，但似乎没有任何工作。我暂时在div上有边框，以便更容易看到div。但是，当我尝试应用任何类型的居中时，div保持在左侧。如果有人能够将以下所有3个div都集中在一起，那就太棒了，因为我对html和css编码很新。提前致谢！这是页面：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Vortex Network</title>
<link href='https://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>
<style type="text/css">
#top-image {
background:url('https://www.14denoviembre.es/img/stars_5.png') -25px -50px;
position:fixed ;
top:0;
width:100%;
height:100%;
background-size: calc(100% + 50px);
z-index:98;
}
@media screen and (min-width: 480px) {
#top-image {
width:20%;
height:20%;
}
}
body {
color:#FFF;
height:55%;
width:100%;
height:100%;
color:#FFF;
min-width:100%;
width: auto !important;
overflow-y: scroll;
}
.stars {
position: absolute;
background-image: url( http://www.14denoviembre.es/img/hori.png ), url( http://www.14denoviembre.es/img/stars_5.png );
background-repeat: repeat-x,repeat-x repeat-y;
transform:translate3D(0em, 0em, 0);
animation: stars 21s ease;
transform-style: preserve-3d;
}
.Icon {
width: 710px;
height: 450px;
top: 5%;
position: absolute;
text-align: center;
border-style: solid;
margin: auto;
}
#thumbs {
border-style: solid;
position: absolute;
width: 925px;
top: 55%;
margin: auto;
padding: 10px;
text-align: center;
margin: auto;
}
.status {
position: absolute;
height: 50px;
width: 500px;
border: 3px solid #ffffff;
text-align: center;
top: 77%;
margin: auto;
-moz-box-shadow: inset 0 0 75px #ffffff;
-webkit-box-shadow: inset 0 0 75px #ffffff;
box-shadow: inset 0 0 75px #ffffff;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 5;
}
.floating{
-webkit-animation-name: Floatingx;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-name: Floating;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in-out;
}
@-webkit-keyframes Floatingx{
from {-webkit-transform:translate(0, 0px);}
65% {-webkit-transform:translate(0, 15px);}
to {-webkit-transform: translate(0, -0px); }
}
@-moz-keyframes Floating{
from {-moz-transform:translate(0, 0px);}
65% {-moz-transform:translate(0, 15px);}
to {-moz-transform: translate(0, -0px);}
}
.scaling{
float: center;
-webkit-animation-name: scalex;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-in-out;
-moz-animation-name: scale;
-moz-animation-duration:3s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:ease-in-out;
}
@-webkit-keyframes scalex{
from {-webkit-transform: scale(0.9);}
65% {-webkit-transform: scale(1.0);}
to {-webkit-transform: scale(0.9);}
}
@-moz-keyframes scale{
from {-moz-transform: scale(0.9);}
65% {-moz-transform: scale(1.0);}
to {-moz-transform: scale(0.9);}
}
.zoom_img img{
-moz-transition:-moz-transform 0.2s ease-in;
-webkit-transition:-webkit-transform 0.2s ease-in;
-o-transition:-o-transform 0.2s ease-in;
}
.zoom_img img:hover{
-moz-transform:scale(1.1);
-webkit-transform:scale(1.1);
-o-transform:scale(1.1);
}
.shadowfilter {
-webkit-filter: drop-shadow(0px 0px 0px rgba(0,0,0,0.80));
-webkit-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.shadowfilter:hover {
-webkit-filter: drop-shadow(0px 0px 8px rgba(255, 255, 179, 0.8));
}
p {
font-family: 'Luckiest Guy', cursive;
-webkit-text-stroke: 3px black;
color: #ae00de;
font-size: 2.6em;
margin:0px;
}
</style>
</head>
<script>
(function(){
ShootingStar = function( id ) {
this.n = 0;
this.m = 0;
this.defaultOptions = { velocity:8, starSize:10, life:300, beamSize:400, dir:-1 };
this.options = {};
id = ( typeof id != "undefined" )?id:"";
this.capa = ( $( id ).lenght > 0 )?"body":id;
this.wW = $( this.capa ).innerWidth();
this.hW = $( this.capa ).innerHeight();
};
ShootingStar.prototype.addBeamPart = function( x, y ) {
this.n++;
var name = this.getRandom( 100, 1 );
$( "#star"+name ).remove();
$( this.capa ).append( "<div id='star"+name+"'></div>" );
$( "#star"+name ).append( "<div id='haz"+this.n+"' class='haz' style='position:absolute; color:#FF0; width:10px; height:10px; font-weight:bold; font-size:"+this.options.starSize+"px'>·</div>" );
if ( this.n > 1 ) $( "#haz" + ( this.n - 1 ) ).css( { color:"rgba(255,255,255,0.5)" } );
$( "#haz" + this.n ).css( { top: y + this.n, left: x + ( this.n * this.options.dir ) } );
}
ShootingStar.prototype.delTrozoHaz = function() {
this.m++;
$( "#haz" + this.m ).animate( {opacity:0}, 75 );
if ( this.m >= this.options.beamSize ) { $( "#ShootingStarParams" ).fadeOut( "slow" ); }
}
ShootingStar.prototype.getRandom = function( max, min ) {
return Math.floor( Math.random() * (max - min + 1)) + min;
}
ShootingStar.prototype.toType = function ( obj ) {
if ( typeof obj === "undefined" ) { return "undefined"; /* consider: typeof null === object */ }
if ( obj === null ) { return "null"; }
var type = Object.prototype.toString.call( obj ).match( /^\[object\s(.*)\]$/ )[1] || '';
switch ( type ) {
case 'Number': if ( isNaN( obj ) ) { return "nan"; } else { return "number"; }
case 'String': case 'Boolean': case 'Array': case 'Date': case 'RegExp': case 'Function': return type.toLowerCase();
}
if ( typeof obj === "object" ) { return "object"; }
return undefined;
}
ShootingStar.prototype.launchStar = function( options ) {
if ( this.toType( options ) != "object" ) { options = {}; }
this.options = $.extend( {}, this.defaultOptions, options );
this.n=0;
this.m=0;
var i=0, l=this.options.beamSize,
x=this.getRandom( this.wW - this.options.beamSize - 100, 100 ), y=this.getRandom( this.hW - this.options.beamSize - 100, 100 ),
self = this;
for( ; i<l; i++ ) { setTimeout( function(){ self.addBeamPart( x, y ); }, self.options.life + ( i * self.options.velocity ) ); }
for( i=0; i<l; i++ ) { setTimeout( function(){ self.delTrozoHaz() }, self.options.beamSize + ( i * self.options.velocity ) ); }
$( "#ShootingStarParams" ).html();
$( "#ShootingStarParams" ).fadeIn( "slow" );
}
ShootingStar.prototype.launch = function( everyTime ) {
if ( this.toType( everyTime ) != "number" ) { everyTime = 2; }
everyTime = everyTime * 1000;
this.launchStar();
var self = this;
setInterval( function() {
var options = {
dir: ( self.getRandom( 1, 0 ))?1:-1,
life: self.getRandom( 400, 100 ),
beamSize: self.getRandom( 700, 400 ),
velocity: self.getRandom( 10, 4 )
}
self.launchStar( options );
}, everyTime );
}
})();
</script>
<body class="stars">
<div class="zoom_img">
<div id="thumbs">
<!-- Forum Icon -->
<a href="http://vortexpvp.com/forum" id="single_image1"><img class="shadowfilter" src="http://s15.postimg.org/i03eeyw23/Forums_After.png" alt="Forums_Icon" height="180" width="180"/></a>
<!-- Vote Icon -->
<a href="http://vortexpvp.com/vote" id="single_image2"><img class="shadowfilter" src="http://s15.postimg.org/vshtalmtn/Vote_After.png" alt="Vote_Icon" height="180" width="180"/></a>
<!-- Store Icon -->
<a href="http://vortexpvp.com/donate" id="single_image3"><img class="shadowfilter" src="http://s15.postimg.org/j4xgkciiz/Store_After.png" alt="Shop_Icon" height="180" width="175"/></a>
<!-- Staff Icon -->
<a href="http://vortexpvp.com/members" id="single_image4"><img class="shadowfilter" src="http://s15.postimg.org/ds8m67umj/Staff_After_2.png" alt="Staff_Icon" height="180" width="180"/></a>
<!-- Bans Icon -->
<a href="http://vortexpvp.com/bans" id="single_image5"><img class="shadowfilter" src="http://s15.postimg.org/5vo4xzj63/Bans_After_2.png" alt="Bans_Icon" height="180" width="180"/></a>
</div>
</div>
<!-- Logo -->
<div class="Icon">
<img src="http://files.enjin.com/353719/module_header/10950667/background/Vortex-Network-Logonew.png" class="scaling" width="642" height="460"></img>
</div>
<!-- IP Adress -->
<div class="status">
<p>play.vortexpvp.com</p>
</div>
<div id="top-image"></div>
<div id="ShootingStarParams"></div>
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="ShootingStarClass.js"></script>
<script type="text/javascript">
$( document ).ready( function(){
var shootingStarObj = new ShootingStar( "body" );
shootingStarObj.launch();
});
</script>
</div>
</div>
</body>
</html>