Question

我正在尝试将'div'属性与页面中心对齐（水平）。问题是，无论我使用什么属性，'div'继续与左对齐。我正在努力的'div'是网页的'div'页面，它位于'html'和'body'属性中。这是CSS代码：

#page{
    margin-top:20px;
    margin-bottom:20px;
    margin-left: auto;
    margin-right:auto;

    border-color: black;
    border-style: solid;
    border-width: thin;

    overflow:auto;

    padding-bottom: 10px;
    padding-top: 0px;

    width:1200px;
    background-color:#ffffff;
    font-family:Arial, Helvetica, sans-serif;
    color:black;
    font-size:12px;    
    height:700px;
}

和'html'，'body'CSS代码如下：

html,body {
    background-color:#FFFFFF;
    margin-left: auto;
    margin-right: auto;
}

请注意，如果我删除“溢出”属性，div将与页面中心对齐（尽管它覆盖了顶部的菜单）但是我需要“overflow”属性来自动添加滚动条如果在此div中显示的页面的宽度/高度大于CSS中指定的页面的宽度/高度。

Answer 1

我暂时没有编写任何内容，但正常情况下，当我创建一个居中的页面时：

html, body { width: 100%; height: 100%; margin: 0 auto; text-align: center; }

然后是div：

#page { width: 900px; overflow: hidden; text-align: left; margin: 20px 0 20px 0; }

这可能有效，也可能不行，就像我说的那样，已经有一段时间了。

Answer 2

您的 div 似乎正在填充全屏宽度。因此，居中对齐不会对div产生任何可见效果。尝试使用 span 。

以下操作不起作用

<body style="text-align:center">
  <div>Foo</div>
</body>

以下工作

<div style="text-align:center">
  <span>Foo</span>
</body>

Answer 3

为了保证金：在您的情况下自动工作需要具有主容器的定义宽度/高度，即HTML和BODY

重要：HTML和BODY元素必须使用width / height属性进行控制

执行以下操作

html,body {
    background-color:#FFFFFF;
   width:100%;
    height:100%;
}

并观看此fiddle

Answer 4

简单：

<强> HTML

<div id="page"></div>

<强> CSS

#page {
  width: 350px; height: 400px; border: 1px solid #000; margin: auto
}

jsFiddle example

Answer 5

如果您尝试水平居中，也可以查看“左”和“右”属性以使a居中。

例如，如果您的宽度是页面的60％（宽度：60％），您可以设置（左：20％）和（右：20％）可以居中，但这取决于您的div如何定位。（位置：绝对）或（位置：相对）。

（位置：绝对），上面的宽度，左边和右边应该水平居中。

HTML中也有<center> enter code </center>过去对我有用。

我不是这样的大师，所以我不知道在你的情况下使用什么“最佳实践”。

Answer 6

<div style="margin:0px auto;">sfsfsafafas</div>

使用此代码肯定会使div成为中心。

无法将<div>对齐到中心</div>

6 个答案: