HTML div 标签左、右边距属性对不同浏览器的工作方式不同答案

【问题标题】：HTML div tag left, right margin properties work differently for different browsersHTML div 标签左、右边距属性对不同浏览器的工作方式不同
【发布时间】：2013-09-23 19:07:16
【问题描述】：

我将 div 标签作为 html 页面中的第一个元素。我希望这个元素以页面为中心。因此，我设置了这个 div 标签的左右边距属性。例如左边距：20%

但是，边距在不同浏览器中的效果不同，并且 UI 对齐方式因浏览器而异

我该如何解决这个问题？

如何设置边距以便它们在所有浏览器中都一样？

提前致谢。

【问题讨论】：

请发布您的代码。
如果你只是想居中然后做 margin: 0 auto;前提是您在 div 上设置了宽度

标签： html

【解决方案1】：

DIV 居中

居中相对定位的 div

#div {
  position: relative;  /* Or without position property | default is static */
  width: 960px;        /* Change to your needs */
  margin: 0 auto;
}

您也可以使用例如margin: 0 auto 20px; 其中0 是顶部，auto 是左/右，20px 是底部。

居中绝对定位的 div

#div {
  position: absolute;
  width: 960px;        /* Change to your needs */
  top: 0;
  left: 50%;
  margin-left: -480px; /* Margin left is - width / 2 */
}

【讨论】：

【解决方案2】：

尝试将以下 css 属性添加到您的 css 类：

margin:0 auto;

【讨论】：

我的代码很简单如下：

这是第一列这是第二列
另外我目前没有使用 css。不过，我使用 css 没有问题。我正在尝试将我的 html 表格包装在 div 标签中，然后通过设置其左右边距来对齐 div 标签以将其正确定位在页面上。
将 style="margin-left:28%" 替换为 style="margin:0 auto;"
@user2494444 如果您使用的是 HTML5，请避免使用内联样式，这是无效的。

【解决方案3】：

如果您在 div 上设置了宽度，通常这会更好

yourDiv {
    margin: 0 auto;
}

在不了解有关您的 div 的更多信息的情况下，这是您最好的选择。第一个0是设置margin top和bottom为0，auto是margin left和right。

【讨论】：

我的代码很简单如下：

这是第一列这是第二列
另外我目前没有使用 css。不过，我使用 css 没有问题。我正在尝试将我的 html 表包装在 div 标签中，然后通过设置其左右边距来对齐 div 标签以将其正确定位在页面上
@user2494444 我将假设您希望 div 的宽度为 44%，因为您的边距为 28%（假设右边的 28% 也是居中的）。在 div 上设置 44% 的宽度，并使用 margin: 0 auto;注意：即使您不更改边距，在这种情况下 44% 的宽度仍应居中您的 div