CSS获取文章中心

我的目标是让文章处于左侧和右侧的中间位置。我目前的语法是允许leftnav和一边“粉碎”成另一个。我已经将左侧边距和左侧边距添加到了我的文章中，但似乎并不奏效。我怎样才能在页面的中心获得文章，而不用“粉碎”到左侧的页面？感谢大家。CSS获取文章中心

CSS

/* CSS Document */ 

body{ 
background-color:#9F6; 
} 

section{ 
width:960px; 
/*padding:15px;*/ 
} 

header{ 
height:150px; 
outline:#000 dotted; 
} 

nav{ 
position:relative; 
outline:#000 dotted; 
} 

nav ul{ 
padding:15px; 
} 

nav ul li{ 
/* Moves the nav in a horizontal fashion */  
display:inline; 
} 

nav ul li a{ 
list-style-type:none; 
text-decoration:none; 
text-transform:capitalize; 
padding:15px; 
} 

nav ul li a:hover{ 
background-color:#F00; 
color:#0FF; 
} 

#leftnav{ 
float:left;  
width:160px; 
outline:#000 dotted: 
/*margin-right:15px; */ 
/*padding:15px;*/ 
/*padding-right:2cm;*/ 
} 

#rightnav{ 
float:right; 
width:160px; 
outline:#000 dotted: 
} 

aside, article{ 
min-height: 550px; 
/*background-color: #F96;*/ 
outline:#000 dotted; 
/*padding: 1px;*/ 
} 

article{ 
width:750px; 
/*margin-left:15px;*/ 
/*padding-left:65px;*/ 
} 

footer{ 
width:960px; 
outline:#000 dotted; 
margin-top:15px; 
text-align:center; 
}

HTML

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<link rel="stylesheet" type="text/css" href="another-css.css"> 
<title>Another Test</title> 
</head> 

<body> 
    <section> 
     <header> 
     <h3>This Is The Header</h3> 
     </header> 

     <nav> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Cars</a></li> 
       <li><a href="#">About Us</a></li> 
       <li><a href="#">Contact us</a></li> 
      </ul> 
     </nav> 

     <aside id="leftnav"> 
     aside left 
     </aside> 

     <aside id="rightnav"> 
     aside right 
     </aside> 

     <article> 
     article 
     </article> 

     <footer> 
     Copyright 2013 
     </footer> 

    </section> 
</body> 

</html>

来源

2013-10-12 msc msc

margin-left: auto; 
margin-right: auto;

您是否试图在文章上使用上述代码

来源

2013-10-12 17:09:34

是的，它工作得很好。谢谢 –

@mscmsc你可以投票，然后请 –

没问题，只是做 –

设置margin:0 auto;为文章类：

article{ 
width:600px; /* decreased to 600px */ 
    margin:0 auto;   /* added */ 
/*margin-left:15px;*/ 
/*padding-left:65px;*/ 
}

jsfiddle

来源

2013-10-12 17:09:27

感谢您的帮助。欣赏它 –

这是一个保证金问题。添加到您的文章CSS

margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto;

的宽度由PX定义，那么可能是你必须将它们调整到你想要的分辨率

来源

2013-10-12 17:14:26

CSS获取文章中心

回答

相关问题