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獲取文章中心

回答

相關問題