Question

我在margin:0 auto;课程中添加了.wrapper，以便将所有内容集中在一起。我有几个问题：

margin:0 auto;是否足以集中内容？
如何解决我的案例中心问题？

这是我的 style.css 文件。

*{
  margin: 0;
  padding: 0;
  outline: 0
}
body {
  font-size: 15px;
  line-height: 25px;
  font-family: arial
}
.wrapper {
  width: 960px;
  margin: 0 auto;
}
.form_area {}

这是我的 index.html 文件。

<div class="wrapper">
  <div class="header">
    <ul>
      <li><a href="">Hello</a>
      </li>
      <li><a href="">Hello</a>
      </li>
      <li><a href="">Hello</a>
      </li>
      <li><a href="">Hello</a>
      </li>
    </ul>
  </div>
  <div class="form_area">
    <form action="" method="POST">
      <table>
        <tr>
          <td>First Number :</td>
          <td>
            <input type="number" name="numOne" placeholder="Input Your First Number">
          </td>
        </tr>
        <tr>
          <td>Second Number :</td>
          <td>
            <input type="number" name="numTwo" placeholder="Input Your Second Number">
          </td>
        </tr>
        <tr>
          <td>
            <input type="reset" name="reset" value="Reset">
          </td>
          <td>
            <input type="submit" name="submit" value="Calculate">
          </td>
        </tr>
      </table>
    </form>
  </div>
</div>

正在使用 DEMO

Answer 1

几点要考虑..

您要居中的.wrapper的宽度必须小于.container。为了看到明显的差异。在您的示例中，包装器的宽度非常宽，不能“居中”！尝试将宽度设置为较小的值，例如400px。
您想要“居中”的内容也很重要。就像你想要的那样
1. 要使文本居中，请使用text-align:center;属性。
2. 要将每个元素居中，然后将它们display设为inline-block，然后设置父元素的text-align:center;属性。
如果您已将float应用于.wrapper或您想要居中的任何元素，那么margin: 0 auto; 将无效。因为float会干扰文档的正常流动并将元素拉出正常流量。

根据你的意见。

只需在div内介绍另一个.centered让我们说.wrapper并包含要居中的内容。并为其指定较小的width并设置margin: 0 auto;。它应该以{{1}}为中心。 JSFiddle

Answer 2

很好，但也许你的屏幕分辨率很小，将宽度更改为较小的值才能看到它

.wrapper {width:300px; margin:0px auto;}    <!-- demo width-->

Answer 3

body { width: 100%; height: 100%; margin: 0px; padding: 0px; }
.wrapper
{
    margin: 0 auto;
    width: 20%;
    position: absolute;
    top: 25%; 
    left: 0;
    bottom: 0; 
    right: 0;
}

或使用以下代码

.wrapper
{
   text-align: center;
}
.centered{
   display: inline-block;
   vertical-align: top;
}

如果您的html如下：

<div class="wrapper">
    <div class="centered">
       ......
       your content
       ......
    </div>
</div>

如何将所有内容带到页面中心？

3 个答案: