5

我正在尝试将“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 将与页面的中心对齐（尽管它覆盖了它顶部的菜单）但我需要“溢出”属性来自动添加滚动条，如果宽度将在此 div 中显示的页面的 /height 大于 CSS 中指定的那些。

4

6 回答 6

2

我有一段时间没有编写任何代码，但是通常在创建居中页面时：

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; }

就像我说的那样，这可能会也可能不会起作用，这已经有一段时间了。

于 2013-05-18T13:00:18.750 回答
2

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

重要提示：HTML 和 BODY 元素都必须使用 width/height 属性进行统治

执行以下操作

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

看这个小提琴

于 2013-05-18T12:55:39.107 回答
1

看来您的div正在填充全屏宽度。所以中心对齐不会对 div 产生任何可见的影响。尝试改用跨度。

以下将不起作用

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

以下应该工作

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

于 2013-05-18T12:52:24.133 回答
1 
<div style="margin:0px auto;">sfsfsafafas</div>

使用此代码肯定会使 div 居中。

于 2013-06-08T06:41:11.180 回答
0

简单的：

HTML

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

CSS

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

jsFiddle 示例

于 2013-05-18T12:52:25.900 回答
0

如果您尝试水平居中，您还可以查看用于居中 a 的“左”和“右”属性。

例如，如果您的宽度是页面的 60% (width:60%)，您可以设置 (left:20%) 和 (right:20%) 可以将其居中，但这取决于您的 div 的位置。（位置：绝对）或（位置：相对）。

(position:absolute) 具有上述宽度，left 和 right 应该水平居中。

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

不过，我不是这方面的专家，所以我不知道在您的情况下使用什么“最佳实践”。

于 2013-05-18T12:58:55.543 回答