0

#main到目前为止， 我一直在尝试使页面上的 div 居中对齐，但没有成功。

有问题的页面是通用页面。

我一直在将 cssmargin: 0px auto;应用于#maindiv，但无法使其居中对齐。

我希望内容在大屏幕上居中对齐，但浮动菜单栏是相同的。任何人都可以帮助我实现这一目标吗？我搞不清楚了。

4

3 回答 3

2

只需添加以下内容：

#main {
      margin: 0 auto;
      width: 600px;
      background-color: #EEEEEE;
      text-align: center;
}

这么简单的HTML例子：

<div id="main">
    <span>Simply dummy text</span>
    <span>Simply dummy text</span>
    <span>Simply dummy text</span>
</div>

您不能这样做width: 100%，因为您需要定义要居中的元素的宽度，而不是父元素。

编辑：

我在这里创建了演示jsFiddle.net

于 2012-05-26T18:23:41.217 回答
1

只要您不设置宽度，margin 的值 auto 就不起作用。因此，您必须设置 div#main 的宽度。

看看这个演示中的紫框。

于 2012-05-26T18:17:02.113 回答
1

首先，你的 HTML 有问题。您在一个页面中应用了一个 ID ( main) 两次。ID 是唯一的，即每页只能使用一次。可以根据需要尽可能多地使用类。

#main {
  width: 1320px;
  margin: 0 auto;
}

.right {
  width: 200px;
}

.bigpic {
  width: 540px;
  /** and  remove max-width **/
}

并且不要忘记删除第二个 ID。#main-wrapper这是（不幸的命名）的第一个孩子

于 2012-05-26T18:31:46.457 回答