logo标签列表

无法将<div>居中对齐

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

请注意，如果我删除“overflow”属性，则div将居中对齐页面（尽管它会覆盖在其上的菜单），但我需要“overflow”属性，以便在CSS中指定的宽度/高度大于此div内显示的页面的宽度/高度时自动添加滚动条。
1
你尝试过将margin参数设置为"0 auto"而不是仅使用auto吗？ - Sven Rojek
请在 jsfiddle 上展示您的完整代码。 - ShibinRagh
是的，我已经尝试了0自动化，但它也没有帮助... - Lefteris008
6个回答
4

我已经有一段时间没有编写代码了，但通常当我创建一个居中的页面时：

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

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

3

看起来你的div占据了整个屏幕宽度。因此，居中对齐不会对该

产生任何可见效果。尝试使用元素代替。

以下方法不起作用

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

以下代码应该可以正常工作

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

2
为了使margin:auto在您的情况下生效，需要为HTML和BODY这两个主要容器定义宽度/高度。
重要提示：必须使用width/height属性来控制HTML和BODY元素。
请按照以下步骤进行操作：
html,body {
    background-color:#FFFFFF;
   width:100%;
    height:100%;
}

并观看这个示例

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

使用这段代码，它能够确保将 div 居中显示。
0

简单：

HTML

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

CSS

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

jsFiddle 示例

0
如果您想要水平居中一个
，您可以查看“left”和“right”属性。
例如，如果您的宽度是页面的60％（width:60％），您可以设置(left:20%)和(right:20%)，这可能会使其居中，但这取决于您的
的定位方式(position:absolute)或(position:relative)。
使用上述宽度、左侧和右侧的(position:absolute)应该可以水平居中。
在HTML中还有<center> enter code </center>，在过去对我有效。
不过，我并不是这方面的专家，所以我不知道在您的情况下使用什么“最佳实践”。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接