我用
做了一个divclass="text-content"
然后在CSS set
中.text-content{
width:60%
并且div内的文本与左侧对齐。它占据了身体的60％，但它左对齐，而不是中心。为什么是这样？除了班级之外别无其他任何影响div。放置text-align：center;在CSS中没有做任何事情。
如果您需要更多上下文，请参阅以下所有代码：
答案 0 :(得分：1)
你没有做任何事情来使它居中，所以它不会居中。
为了使块级元素居中，你应该像auto一样给它左右边距：
.text-content {
width: 60%;
margin-left: auto;
margin-right: auto;
}
...或简写也适用：
.text-content {
width: 60%;
margin: 1em auto;
}
答案 1 :(得分：0)
这是div显示的预期行为：block;
你可以做两件事：
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{
top: 0;
max-width: 130px;
height: auto;
padding: 0;
margin-right: 10px;
margin-left: 0px;
margin-bottom: 10px;
}
body, html{
height: 100%;
margin: 0;
padding: 0;
border: 0;
text-align: center;
}
.header, #up, .text-content {
display: inline-block;
text-align: left;
}
.logo{
float: left;
margin: 0;
padding: 0;
}
.header{
background: black;
width: 100%;
margin: 0;
padding: 0;
position: fixed;
top: 0;
left: 0;
}
.container{
width: 60%;
margin: 0 auto;
}
a {
text-decoration: none;
color: white;
font-family: 'Oswald';
font-size: 25px;
}
ul{
color: white;
}
li {
list-style: none;
float: right;
margin: 15px;
padding-top: 14px;
font-size: 25px;
font-family: 'Oswald';
}
#up{
margin-top: 120px;
width: 60%;
}
.text-content{
width: 60%;
}
.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) {
.parallax{
background-attachment: scroll;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>AS/SO -- Home</title>
<meta charset="utf-8">
<meta name="description" content="A graphic design studio based in Croatia.">
<meta name="tags" content="graphic, studio, design, typography, retro, croatia">
<meta name="robots" content="index, nofollow">
<link rel="stylesheet" type="text/css" href="styling.css">
<link rel="icon" href="favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'>
</head>
<body> <!-- subject of page - the header-->
<div class="header">
<div class="container">
<div class="logo">
<a href="index.html"><img class="properties" src="header.jpg"></a>
</div>
<div class="navbar">
<ul>
<li class="navbaritems"><a href="contact.html">contact</a></li>
<li class="navbaritems"><a href=portofolio.html>portofolio</a></li>
<li class="navbaritems"><a href=index.html>home</a></li>
</ul>
</div>
</div>
</div>
<div id="up">
<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>
<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>
<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>
<div class="parallax"></div>
<div class="text-content">
<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>
<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>
<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>
<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>
<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>
</div>
</body>
</html>
答案 2 :(得分：0)
将margin: 120px auto 0;添加到div。
.text-content {
margin: 120px auto 0;
width: 60%;
}
答案 3 :(得分：-1)
尝试从顶部的css文件中将其添加到您的代码中
*{
margin:0px;
padding:0px;
}
此代码将设置边距和填充填充为0，然后您可以创建自己的部门