Question

我试图将div放在div的中心。相反，它的阴影向右。我尝试了所有职位组合。我尝试了在其他线程中找到的所有内容，并且无法修复此问题。这就是它的外观：https://jsfiddle.net/L13qa1tr/

content_page.html:

<div id="wrapper">
      <div id="main-content" class="container">
          <h1 class="text-center">This is a test, remove before release.This is a test, remove before release.This is a test, remove before release.</h1>
      </div>
</div>

相关CSS，content_page.css:

body {
  font-family: 'Lora', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: relative;
  top: 61px;
  width: 100%;
  height: 100%;
  color: white;
  background-color: black; }

html {
  width: 100%;
  height: 100%; }

h1 {
  font-family: 'Cabin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  margin: 0 0 35px;
  letter-spacing: 1px;
  text-transform: uppercase; }

#wrapper{
    background-color: #555555;
    width: 100%;
    height: auto;
    padding: 5px;
    margin: 0 auto;
}
#main-content {
    position: relative;
    top: 32px;
    left: 88px;
    right: 88px;
    bottom: 32px;
    background-color: #E1E1E1;
    height: auto;
    box-sizing: border-box;
    margin-right: auto;
    margin-left: auto;
}

我可以发布所需的任何其他信息，请告诉我。如果有人能指出我正确的方向，那将是伟大的。同样让我感到困惑的部分是内部div的宽度应该是100％所以如果它占用了所有的空间就有意义，但在这种情况下，它不会占用足够的空间。

Answer 1

那里有很多不必要的代码。我删除了很多。

保证金：0自动;需要放在#main-content中以使其居中而不是#wrapper。我更改了宽度以向您显示它的工作原理。

＆＃13;

body {
  font-family: 'Lora', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: relative;
  top: 61px;
  color: white;
  background-color: black; }

h1 {
  font-family: 'Cabin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  margin: 0 0 35px;
  letter-spacing: 1px;
  text-transform: uppercase; }

#wrapper{
    background-color: #555555;
    padding: 5px;
}
#main-content {
    position: relative;
    top: 32px;
    background-color: #E1E1E1;
    box-sizing: border-box;
    margin: 0 auto;
    width: 50%;
}

＆＃13;

<div id="wrapper">
      <div id="main-content" class="container">
          <h1 class="text-center">This is a test, remove before release.This is a test, remove before release.This is a test, remove before release.</h1>
      </div>
</div>

＆＃13;

Answer 2

如果您试图将#main-content div放在中心位置，请按以下步骤操作。

#main-content {
    position: relative;
    width: 80%;
    width:calc( 100% - 88px - 88px);
    margin-left: auto;
    margin-right: auto;
    background-color: #E1E1E1;
    height: auto;
}

calc方法只是使用左右两个方法。你可以删除它，只使用百分比，它仍然会在中间对齐。

要使div居中，您需要设置宽度，然后左右自动边距：

margin-left: auto;
margin-right: auto

请参阅this更新的小提琴。

Answer 3

这是您问题的一部分，您正在使用

移动div

position:relative并添加top,left,right和bottom。

相反，您应该添加的是margin:auto。宽度减少只是为了将内容放在中心。

#main-content {
  width:600px;
  margin:auto;
  background-color: #E1E1E1;
}

无法正确居中div

3 个答案: