我做了一個div與爲什麼這些div對齊左側，即使寬度爲60％;
class="text-content"
，然後在CSS設置
.text-content{
width:60%
和DIV中的文本得到左對齊。它佔據了身體的60％，但它是左對齊，不是中心。爲什麼是這樣？除此之外別無其他，只是影響了div。放置文本對齊：中心;在CSS中不做任何事情。
這裏是所有的代碼，如果你需要更多的上下文：
HTML：https://pastebin.com/1iv2d27V
CSS：https://pastebin.com/DTCbiBe8
你有沒有做過任何居中，所以不會居中。
爲了居中塊級元素，你應該給它左，像這樣的auto右頁邊距：
.text-content {
width: 60%;
margin-left: auto;
margin-right: auto;
}
...或速記效果一樣好：
.text-content {
width: 60%;
margin: 1em auto;
}
謝謝！完美工作。我不好意思問新手的問題，但是很快我就把這一切都弄清楚了，並回答其他人的新手問題來幫助你:) – Andy
這就是預期行爲爲div顯示：塊;
您可以做兩件事：
1）增加一個保證金餘額：20％; （所以左側20％空間，60％圖層，右側20％空間）。
2）更改要顯示的元素：inline-block;並添加：text-align：center;給你的身體。
body { text-align: center; }
.header, #up, .text-content {
display: inline-block;
text-align: left;
}
我已經展示在下面的代碼後面的選項：
img.properties{
\t top: 0;
\t max-width: 130px;
\t height: auto;
\t padding: 0;
\t margin-right: 10px;
\t margin-left: 0px;
\t margin-bottom: 10px;
}
body, html{
\t height: 100%;
\t margin: 0;
\t padding: 0;
\t border: 0;
text-align: center;
\t \t }
.header, #up, .text-content {
display: inline-block;
text-align: left;
}
.logo{
\t float: left;
\t margin: 0;
\t padding: 0;
}
.header{
\t background: black;
\t width: 100%;
\t margin: 0;
\t padding: 0;
\t position: fixed;
\t top: 0;
\t left: 0;
}
.container{
\t width: 60%;
\t margin: 0 auto;
\t
}
a {
\t text-decoration: none;
\t color: white;
\t font-family: 'Oswald';
\t font-size: 25px;
}
ul{
\t color: white;
}
li {
\t list-style: none;
\t float: right;
\t margin: 15px;
\t padding-top: 14px;
\t font-size: 25px;
\t font-family: 'Oswald';
}
#up{
\t margin-top: 120px;
\t width: 60%;
\t
}
.text-content{
\t
\t width: 60%;
\t
}
.parallax {
/* The image used */
background: url('parallax1.jpg');
/* Full height */
height: 300px;
width: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
@media only screen and (max-device-width:1024px) {
\t .parallax{
\t \t background-attachment: scroll;
\t }
}<!DOCTYPE html>
<html lang="en">
<head>
\t <title>AS/SO -- Home</title>
\t <meta charset="utf-8">
\t <meta name="description" content="A graphic design studio based in Croatia.">
\t <meta name="tags" content="graphic, studio, design, typography, retro, croatia">
\t <meta name="robots" content="index, nofollow">
\t <link rel="stylesheet" type="text/css" href="styling.css">
\t <link rel="icon" href="favicon.ico">
\t <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'>
</head>
<body> <!-- subject of page - the header-->
\t
\t <div class="header">
\t \t <div class="container">
\t \t \t <div class="logo"> \t
\t \t \t \t <a href="index.html"><img class="properties" src="header.jpg"></a>
\t \t \t </div>
\t \t \t <div class="navbar">
\t \t \t \t <ul>
\t \t \t \t \t <li class="navbaritems"><a href="contact.html">contact</a></li>
\t \t \t \t \t <li class="navbaritems"><a href=portofolio.html>portofolio</a></li>
\t \t \t \t \t <li class="navbaritems"><a href=index.html>home</a></li> \t
\t \t \t \t </ul>
\t \t \t </div>
\t \t </div>
\t </div>
\t
\t
<div id="up">
\t \t
\t
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam sed turpis non aliquam. Praesent id egestas magna. Fusce tincidunt rhoncus tortor, vitae pharetra diam mollis mattis. Vivamus tempor, libero sit amet aliquam convallis, massa ex euismod ante, ut sollicitudin arcu purus sed ipsum. Pellentesque odio dolor, vulputate eu eros ac, semper egestas orci. Mauris sit amet ultricies justo, at posuere diam. Duis id consequat eros. Aliquam consectetur bibendum erat, convallis rutrum mauris luctus nec.</p>
\t \t
\t \t <p>Vestibulum enim lectus, pulvinar pellentesque pulvinar sed, dapibus ut leo. Nulla nec mi consequat, dapibus augue egestas, convallis ante. Phasellus rhoncus enim eros, sit amet venenatis mauris luctus quis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ornare odio dolor, fringilla porta magna tristique vel. Nullam egestas sed ex in vehicula. Aliquam sed maximus ipsum, a gravida enim. Sed imperdiet tempus gravida. Vestibulum porttitor odio id neque gravida, vitae tincidunt risus bibendum. Fusce placerat turpis sit amet massa fringilla, non convallis magna gravida. Pellentesque vitae velit volutpat orci luctus lobortis.</p>
\t \t <p>Donec ultrices orci lectus, in tempus libero pulvinar vitae. Nullam rhoncus ut mi accumsan tempus. Vestibulum purus risus, ultrices nec sodales eu, iaculis a velit. Suspendisse consequat feugiat fermentum. Suspendisse velit eros, aliquam sit amet auctor eget, cursus ac risus. Phasellus eu tristique dolor. Sed sapien libero, varius non pulvinar in, congue at mi. Aenean quis lobortis turpis. Cras cursus id lacus a tempus. Vivamus ac felis a leo sodales aliquet consectetur at lacus. Duis sagittis rutrum ultrices. Aenean et facilisis augue.</p>
</div> \t
\t \t <div class="parallax"></div>
\t \t
<div class="text-content"> \t
\t \t <p>Vestibulum nec nisl sem. Proin in arcu ultricies, volutpat enim sit amet, faucibus leo. Nunc cursus eget ligula et consectetur. Suspendisse sed justo nisl. Nulla consequat nisl eget leo porta pharetra. Etiam iaculis libero at est ornare pulvinar. Nam commodo turpis velit, non egestas arcu maximus vitae. Aenean congue nisl vitae arcu eleifend, nec gravida lacus maximus. Mauris ac tellus est. Duis facilisis leo ligula, eu ornare est congue ut. Nunc rhoncus enim nec tortor accumsan, eu gravida nunc malesuada. Fusce risus purus, vehicula ut pretium vitae, pretium in odio. Duis leo magna, porta ac lacinia vel, tempus at sem. Fusce nisl felis, dictum in nunc nec, rhoncus pellentesque libero. Maecenas velit nisl, egestas in iaculis a, sodales vel ipsum.</p>
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam sed turpis non aliquam. Praesent id egestas magna. Fusce tincidunt rhoncus tortor, vitae pharetra diam mollis mattis. Vivamus tempor, libero sit amet aliquam convallis, massa ex euismod ante, ut sollicitudin arcu purus sed ipsum. Pellentesque odio dolor, vulputate eu eros ac, semper egestas orci. Mauris sit amet ultricies justo, at posuere diam. Duis id consequat eros. Aliquam consectetur bibendum erat, convallis rutrum mauris luctus nec.</p>
\t \t <p>Vestibulum enim lectus, pulvinar pellentesque pulvinar sed, dapibus ut leo. Nulla nec mi consequat, dapibus augue egestas, convallis ante. Phasellus rhoncus enim eros, sit amet venenatis mauris luctus quis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ornare odio dolor, fringilla porta magna tristique vel. Nullam egestas sed ex in vehicula. Aliquam sed maximus ipsum, a gravida enim. Sed imperdiet tempus gravida. Vestibulum porttitor odio id neque gravida, vitae tincidunt risus bibendum. Fusce placerat turpis sit amet massa fringilla, non convallis magna gravida. Pellentesque vitae velit volutpat orci luctus lobortis.</p>
\t \t <p>Donec ultrices orci lectus, in tempus libero pulvinar vitae. Nullam rhoncus ut mi accumsan tempus. Vestibulum purus risus, ultrices nec sodales eu, iaculis a velit. Suspendisse consequat feugiat fermentum. Suspendisse velit eros, aliquam sit amet auctor eget, cursus ac risus. Phasellus eu tristique dolor. Sed sapien libero, varius non pulvinar in, congue at mi. Aenean quis lobortis turpis. Cras cursus id lacus a tempus. Vivamus ac felis a leo sodales aliquet consectetur at lacus. Duis sagittis rutrum ultrices. Aenean et facilisis augue.</p>
\t \t <p>Vestibulum nec nisl sem. Proin in arcu ultricies, volutpat enim sit amet, faucibus leo. Nunc cursus eget ligula et consectetur. Suspendisse sed justo nisl. Nulla consequat nisl eget leo porta pharetra. Etiam iaculis libero at est ornare pulvinar. Nam commodo turpis velit, non egestas arcu maximus vitae. Aenean congue nisl vitae arcu eleifend, nec gravida lacus maximus. Mauris ac tellus est. Duis facilisis leo ligula, eu ornare est congue ut. Nunc rhoncus enim nec tortor accumsan, eu gravida nunc malesuada. Fusce risus purus, vehicula ut pretium vitae, pretium in odio. Duis leo magna, porta ac lacinia vel, tempus at sem. Fusce nisl felis, dictum in nunc nec, rhoncus pellentesque libero. Maecenas velit nisl, egestas in iaculis a, sodales vel ipsum.</p>
\t
</div> \t
</body>
</html>嘗試從css文件，從它的頂部添加以下內容到你的代碼
*{
margin:0px;
padding:0px;
}
此代碼填充設置邊距和填充爲0然後喲你現在可以創建自己的分區
將margin: 120px auto 0;添加到div。
.text-content {
margin: 120px auto 0;
width: 60%;
}
請從您的代碼中創建一個jsfiddle並將其鏈接到您的問題中 – cfreear
對於複製件，我很抱歉！ - 我沒有完全意識到這種方式是有效的。感謝大家的幫助，這個社區太棒了！ – Andy