Question

body {
  max-width: 1000px !important;
  margin-right: 5%;
  margin-left: 5%;
  height: 100%;
}

尝试按比例居中我的内容，同时保持最大宽度为1000px似乎不起作用..有没有解决这个问题？保持这个项目5％的利润非常重要。

它将我的所有内容与左侧对齐..

Answer 1

如果您必须在1000px以下的分辨率左右5％边距居中显示页面内容，您可以使用以下代码：

.container{
  width:90%;
  max-width:1000px;
  margin:0 auto;
  background-color: red;
  height:500px;
 }

<body>
  <div class="container"></div>
</body>

超过1000像素的内容结果以您的页面为中心。

Answer 2

您可以在

上创建div并添加CSS，而不是这个

＆＃13;

body {
  margin: 0px;
  padding: 0px;
}
.wrapper {
  width: 100%; 
  max-width: 1000px;
  margin: 0px auto;
  height: 100%;
  text-align: center;
}

＆＃13;

<div class="wrapper"> Your html code placed here </div>

＆＃13;

Answer 3

尝试将以下内容设置为元素以对齐项目中心。

div{
 display: flex;
 justify-content: center;
 align-items: center;
}

＆＃13;

body {
  margin: 0;
  padding: 0;
}

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

＆＃13;

<div> Loreum Ipsum</div>

＆＃13;

Answer 4

您可以在不触摸身体标签的情况下进行操作。 Div就够了。

＆＃13;

.is-centered {
  max-width: 1000px;
  margin: 0 auto;
  display: block;
  padding: 2px;
  width: 100%;
  text-align: center;
  height: 100%;
}

.grey {
  background: grey;
  color: white;
}

＆＃13;

<div class="is-centered grey">
    <p>this is centered!</p>
</div>

＆＃13;

Answer 5

好的感谢您的建议..我发现删除体内的最大宽度，并将其添加到体内的div中有助于保持居中的外观，同时使用5％的边缘..

body {
margin-right: 5%;
margin-left: 5%;
height: 100%;}

<div style="max-width:1920px">content</div>

以最大宽度和边距为中心内容％

5 个答案: