为什么这些div的左侧对齐，即使width：60％; [重复]

Question

这个问题已经在这里有了答案：

• 如何将DIV水平居中 3个答案

我做了一个div

class="text-content" 

然后在CSS集中

.text-content{
    width:60%

并且div内的文本向左对齐。 它占据了60％的身体，但它向左对齐，而不是居中对齐。 为什么是这样？ 除了这个课，别无他法。 文字对齐：居中； 在CSS中不做任何事情。

如果需要更多上下文，请参见以下所有代码：

html： https ： //pastebin.com/1iv2d27V

CSS： https : //pastebin.com/DTCbiBe8

Answer 1

您没有做任何使它居中的事情，因此它不会居中。

为了使一个块级元素居中，您应该像这样给它左边和右边的auto边距：

.text-content {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

…或速记方式也一样：

.text-content {
    width: 60%;
    margin: 1em auto;
}

Answer 2

这是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{ 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> 

Answer 3

添加margin: 120px auto 0; 到divs。

.text-content {
  margin: 120px auto 0;
  width: 60%;
}

Answer 4

尝试将其从顶部的css文件添加到代码中

*{
margin:0px;
padding:0px;
}

此代码将设置边距和填充设置为0，然后您可以创建自己的划分