我做了一个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